离子指令 fancySelect

Question

我正在为多个选择选项使用 fancySelect https://github.com/tipstrade/ionic-fancy-select 和 Ionic 框架。

我对 Ionic 框架有点陌生。

问题：我希望默认选择 fancySelect 中的一些项目。

代码笔：http://codepen.io/anon/pen/QjydZd?editors=101

我该怎么做？

感谢任何帮助。

enter code here

谢谢， DS

Answer 1

它主要是 AngularJS，而不是 Ionic。当您初始化将在选择中使用的项目数组时，设置 item.checked = true;请参阅代码笔中 js 源代码中的第 164 行和 HTML 源代码中的第 78 行以上。

<script>
var $scope.countries = [
  {id: 1, name: 'United States', checked: true},
  {id: 2, name: 'Germany',       checked: false}
]
</script>


<ion-toggle
     ng-repeat="item in items"
     ng-if="multiSelect"
     ng-checked="item.checked"
     ng-model="item.checked"
     class="item item-text-wrap">

如果你想用单选来做，你必须添加一个角度表达式来设置一个 css 类：

ng-class="{selected : item.checked}"

所以标签变成：

<!-- Single select -->
<label
   ng-repeat="item in items"
   ng-if="!multiSelect"
   class="item item-text-wrap"
   ng-class="{selected : item.checked}"
   ng-click='validateSingle(item)'>

在样式表中添加一个类以在模式打开时突出显示选定的国家：

.selected {
  background-color: red !important;
}

如果您想让选定的国家/地区显示为花哨的选择的标签，这样的事情会/可以工作：

$scope.countries_text_single = $scope.countries[0].name;