angular+selecte2(angular ng-repeat渲染)

最新推荐文章于 2021-01-23 12:29:53 发布

aolan8111

最新推荐文章于 2021-01-23 12:29:53 发布

阅读量276

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zml-java/p/5461024.html

版权

本文详细介绍了如何在AngularJS项目中有效使用Select2插件，包括使用ng-repeat代替ng-options的原因，以及如何正确设置select回显值，确保与Angular框架的兼容性和响应性。

摘要由CSDN通过智能技术生成

一、页面代码

　　<option value="">共同创办人</option>

</select>

二、js代码

（1）指令

　　 app.directive('onFinishRenderFilters', function ($timeout) {

　　　　　　return {
　　　　　　　　restrict: 'A',
　　　　　　　　link: function(scope, element, attr) {
　　　　　　　　　　if (scope.$last === true) {
　　　　　　　　　　　　$timeout(function() {
　　　　　　　　　　　　　scope.$emit('ngRepeatFinished');
　　　　　　　　　　　　});
　　　　　　　　　　　}
　　　　　　　　}
　　　　　　};
　　　});

（2）写在Controller里面的js,直接写在Controller下面的，不要写在Controller的某个方法，直接写在Controller里面就行了。ngRepeatFinished要和上面蓝色的字一致页面用的"-"，js用驼峰的方式

　　$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
　　　　　　//下面是在table render完成后执行的js，下面的内容可以删掉，写自己的内容
　　　　　　angular.forEach($scope.sponsorSelected,function(item,key){

　　　　　　　　if(item.ID==$scope.topic.SponsorID){

　　　　　　　　　　$scope.sponorSelectedObj = item.ID;
　　　　　　　　　　$scope.topic.sponsorID = $scope.sponsorSelectedObj;

　　　　　　　　　　$("#sponsorId").val(item.ID).selecte2();//编辑的时候，默认选中下拉框的其中一个值

　　　　　　　　}

　　　　　　});

　　　　});
　　});

注意：当我们在angularJs的项目中用到一些jQuery的插件时，由于angular还没加载完成，插件的js会失效，这是我们就需要用到渲染，使页面加载完成之后，才调用插件的Js。这个渲染对angular的 ng-repeats是通用的，只需要在$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent)中写自己的逻辑代码即可。

2018/09/28------------------------updated

最近又碰到angular+select2回显的问题了。

这次是页面也提前加载好，点击左边的表格，后面显示表格选中的行的内容，其中就包括了多个下拉框的回显。

经测试还是要用ng-repeat而不用ng-options。因为ng-options下来列表的value='0'...是从0开始的，而ng-repeat的值是可以自己赋值的（ps:也可能是我不太懂ng-options,不知道怎么去配那个value）

然后使用angular.element("#id").val("value").select2();//设置select回显的值。注意没有trigger("change")。

注意：这里直接给ng-model赋值的结果是，在下拉列表中会选中，但是回显。所以一定要select2()一下。因为select2是另外的框架，angular框架控制不了他，

其实angular用ng-model赋值的时候已经脏检查了，但是如果用angular.element("#id").val("value").select2().trigger("change");会报错---重复脏检查。

所以这里只用了angular.element("#id").val("value").select2();而且页面用的ng-repeat循环，而非ng-options

<!--舍弃-->
<select class="select-normal" name="group" ng-model="db-user1" select2 ng-options="group.codevalue as (group.codename+'('+group.codevalue+')') for group in userlist">

<!--推荐！！！！！！！！！！！！！！-->

<select class="select-normal" name="group" ng-model="db-user1" select2 > 　　<option ng-repeat=“group in userlist” value="{{group.codevalue}}">{{group.codename}}({{group.codevalue}})</option> </select>