Angular Chosen 默认选择不工作

Question

我正在使用https://github.com/localytics/angular-chosen 创建选择元素并选择默认项目：

<select chosen="{inherit_select_classes:true}" disable-search="true" class="form-control span6" ng-model="myPick">
  <option value=""></option>
  <option value="AAA">AAAAAAAAAAAAAAAA</option>
  <option value="BBB" selected="selected">BBBBBBBBBBBBBBB</option>
</select>

我希望默认选择BBBBBBBBBBBBBBB，但它不起作用：

http://plnkr.co/edit/H2hmEukfjaPL1T4W298O?p=preview

使用selected="selected" 和$scope.myPick = "BBB"; 也无法正常工作。你能帮忙解释一下为什么吗？

如果我删除模型，它就可以正常工作：

<select chosen="{inherit_select_classes:true}" disable-search="true" class="form-control span6">
  <option value=""></option>
  <option value="AAA">AAAAAAAAAAAAAAAA</option>
  <option value="BBB" selected="selected">BBBBBBBBBBBBBBB</option>
</select>

更新 1

• 我的项目已经有一堆 select 和 option 在一堆模板中。将它们拉入$scope.someObject 以执行ng-options 非常耗时。

• 最好不用在任何地方声明或初始化myPick，而是将selected 放在html 模板中。

Answer 1

您可以像这样预定义选项，而不是通过标记插入选项：

$scope.options = {
  'AAA':'AAAAAAAAAAAAAAAA',
  'BBB':'BBBBBBBBBBBBBBB'

} ;
$scope.myPick = "BBBBBBBBBBBBBBB";

在你看来：

<select chosen="{inherit_select_classes:true}" disable-search="true" class="form-control span6" ng-options="v for (k,v) in options" ng-model="myPick">
</select>

你可以在这里看到它是如何工作的：http://plnkr.co/edit/aOV1agWFfJZaTU675wEF?p=preview

Answer 2

你的插件“选择”改变了选择标记，所以它不再是选择元素

<div class="chosen-container chosen-container-single form-control span6 ng-pristine ng-valid localytics-chosen chosen-container-single-nosearch" style="width: 835px;" title="">
    <a class="chosen-single chosen-default" tabindex="-1">
        <span>Select an Option</span>
        <div><b></b></div>
    </a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off" readonly="">
        </div>
        <ul class="chosen-results">
            <li class="active-result" style="" data-option-array-index="2">AAAAAAAAAAAAAAAA</li> 
            <li class="active-result" style="" data-option-array-index="3">BBBBBBBBBBBBBBB</li>
        </ul>
    </div>
</div>

如果您希望 ng-model 与您的插件一起使用，我想您需要创建一个自定义指令（例如 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController）