默认选择的Angular选择不起作用

Question

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

<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 ）