javascript Angular.js 选择集成
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15069697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js Chosen integration
提问by thegrunt
my select inside my angular view where i want to add chosen functionality:
我在我的角度视图中选择我想添加所选功能的位置:
<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/>
my controller: when i inject here the .chosen function, it clears the options.
我的控制器:当我在这里注入 .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!');
});
};
}
my footer:
我的页脚:
<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>
i have no idea, how to get the chosen working. inside controller it clears options and does not apply, the rest does not make any difference. any ideas appreciated
我不知道如何让所选的工作。在控制器内部,它清除选项并且不适用,其余的没有任何区别。任何想法表示赞赏
采纳答案by Stewie
You should maybe try http://angular-ui.github.com/
你应该试试http://angular-ui.github.com/
It's a suite of angular directives. Among them you'll find 'select2' directive which serves as a proxy to Chosenplugin (Select2plugin to be precise).
这是一套角度指令。其中,你会发现“选择2”指令,它充当代理选上的插件(选择二插件要准确)。
回答by Kulbi
Your solution won't work because jQuery code would fire before the element is actually created in the DOM. You should solve this problem using a directive on the form element.
您的解决方案将不起作用,因为 jQuery 代码会在元素在 DOM 中实际创建之前触发。您应该使用表单元素上的指令来解决这个问题。
Element needs to be created dynamically and therefore you are in fact operating on the DOM element - perfect fit for Angular's directives. No use of jQuery is necessary and try to avoid it while working with Angular. Note that jQuery is still required due to Chosendependencies.
元素需要动态创建,因此您实际上是在 DOM 元素上操作 - 非常适合 Angular 的指令。不需要使用 jQuery,在使用 Angular 时尽量避免使用它。请注意,由于选择的依赖项,仍然需要 jQuery 。
I solve the problem using this set:
我使用这个集合解决了这个问题:
- angular-chosen directive https://github.com/localytics/angular-chosen
- [OPTIONAL] Bootstrap3 styling https://github.com/alxlit/bootstrap-chosen
- 角度选择指令https://github.com/localytics/angular-chosen
- [可选] Bootstrap3 样式https://github.com/alxlit/bootstrap-chosen
I suggest you to try writing the directive yourself. It's a nice practice. You can try with this: http://www.youtube.com/watch?v=8ozyXwLzFYs
我建议您尝试自己编写指令。这是一个很好的做法。你可以试试这个:http: //www.youtube.com/watch?v=8ozyXwLzFYs
Good luck!
祝你好运!