javascript - Angular.js 选择集成

Question

我在 Angular View 中选择要添加所选功能的地方:

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

我的 Controller :当我在这里注入(inject) .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>

我不知道如何让所选的工作正常进行。在 Controller 内部它清除选项并且不应用，其余的没有任何区别。任何想法表示赞赏

Answer 1

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

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

我用这个集合解决了这个问题:

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

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

祝你好运!