zoukankan      html  css  js  c++  java
  • angular+selecte2(angular ng-repeat渲染)

    一、页面代码

    <select id="sponsorId" select2 ng-model="sponsorSelectedObj" ng-change="sponsorSelectedChange(sponsorSelectedObj)">

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

      <!--注意,这里不是在select标签写的ng-option,而是在option标签中使用的ng-repeat,因为下面的directive指令是只对ng-repeat有效的,对ng-option无效使。用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。-->

      <option ng-repeat="s in sponsorSelected" value="{{s.ID}}" on-finish-render-filters>

    </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>
  • 相关阅读:
    20145215《Java程序设计》第4周学习总结
    20145215《Java程序设计》第3周学习总结
    20145215《Java程序设计》第2周学习总结
    关于开源中国的代码托管
    问卷调查
    2019年12月29日 回怼老王
    cnblogs今天挂了
    感悟别人的感悟——写在2020年前一天
    心情随笔_20191231
    js事件冒泡和捕捉
  • 原文地址:https://www.cnblogs.com/zml-java/p/5461024.html
Copyright © 2011-2022 走看看