Angular.js 选择的集成答案

【问题标题】：Angular.js Chosen integrationAngular.js 选择的集成
【发布时间】：2013-02-25 14:49:18
【问题描述】：

我在我想要添加所选功能的角度视图中的选择：

<select ng-options="value for value in deutscheBankEvent.dates" ng-init="" ng-model="chosenA" class="chzn-select">
 <option style="display:none" value="">Wählen Sie ein Datum</option>
 </select><br/>

我的控制器：当我在这里注入 .chosen 函数时，它会清除选项。

function Ctrl($scope,$http) {

  $scope.text = '';
  $scope.user = {name: '', last: '', location: ''};
  $scope.value = 0;
  $scope.sendForm = function (){
       $http.post('/Submit/To/Url', $scope.data).success(function(data) {
           alert('done!');
       });
    };
}

我的页脚：

<g:javascript>
 $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});
            jQuery(".adressen1_chzn-select").chosen();jQuery(".adressen0_chzn-select").chosen();
        });
</g:javascript>

我不知道如何让选择的工作。在控制器内部它清除选项并且不适用，其余的没有任何区别。任何想法表示赞赏

【问题讨论】：

标签： javascript angularjs jquery-chosen

【解决方案1】：

您的解决方案将不起作用，因为 jQuery 代码会在元素实际在 DOM 中创建之前触发。您应该在表单元素上使用指令来解决这个问题。

元素需要动态创建，因此您实际上是在对 DOM 元素进行操作 - 非常适合 Angular 的指令。没有必要使用 jQuery，并且在使用 Angular 时尽量避免使用它。请注意，由于 Chosen 依赖关系，仍然需要 jQuery。

我用这套解决了问题：

角度选择指令https://github.com/localytics/angular-chosen
[可选] Bootstrap3 样式https://github.com/alxlit/bootstrap-chosen

我建议您尝试自己编写指令。这是一个很好的做法。你可以试试这个：http://www.youtube.com/watch?v=8ozyXwLzFYs

祝你好运！

【讨论】：

这就是解决方案。它适用于相同的 SELECT。另一方面，AngularUI UI-Select 很难实现，它是一个完全不同的语义。

【解决方案2】：

你应该试试http://angular-ui.github.com/

这是一套角度指令。其中你会发现 'select2' 指令，它充当 Chosen 插件（准确地说是 Select2 插件）的代理。

【讨论】：

Select2 和选择的不一样。
第二种解决方案更简单，我应该早点向下滚动！