结构-行为-样式-angularJs

• ngModel实现Select；
• 分页插件的使用；
• 在$scope域外调用$scope的方法；
• Controller尽量不要取相同的名字；
• ng-repeat有重复值的解决办法；
• ng-class的使用；
• Angular中a标签；
• angular.forEach;
• ng-hide,ng-show;
• 只取一次数据函数；

1、ngModel实现Select

a、html:

<div class="label-search input-group col-lg-2 clearfix" >
    <label>组名：</label>
      <select type="button" class="btn btn-default" ng-options="item.value as item.name for item in myGroup" ng-model="labelGroup" ></select> 
</div>

b、ng-controller:

 $scope.myGroup = [{name:'全部',value:''},
                      {name:'区域位置',value:'区域位置'},
                      {name:'重复购买',value:'重复购买'},
                      {name:'意向等级',value:'意向等级'}];
    $scope.labelGroup = '';

注释：

值 as 显示标签 for 一个对象 in 对象数组"，值，对应labelGroup的值；

select演变一

<div class="form-group clearfix">
<label for="lastname" class="col-sm-1 control-label common-label-center common-add-label">标签分组：</label>
<div class="col-sm-2">
<select class="form-control" ng-click="anyone(cLabel)" ng-model="cLabel.selectedLevelOne" ng-change="cLabel.selectedLevelTwo=''" ng-options="group.name for group in addlabelSelectInfo" >
<option value="">---请选择一---</option>
</select>
</div>
<div class="col-sm-2" ng-show="cLabel.selectedLevelOne&&cLabel.selectedLevelOne.LevelTwo">
<select class="form-control" ng-model="cLabel.selectedLevelTwo" ng-change="cLabel.selectedLevelThree=''"  ng-options="LevelTwo.name for LevelTwo in cLabel.selectedLevelOne.LevelTwo">
<option value="">---请选择二---</option>
</select>
</div>
<div class="col-sm-2" ng-show="cLabel.selectedLevelTwo&&cLabel.selectedLevelOne&&cLabel.selectedLevelTwo.LevelThree">
<select class="form-control" ng-model="cLabel.selectedLevelThree" ng-change="cLabel.selectedLevelFour=''"  ng-options="LevelThree.name for LevelThree in cLabel.selectedLevelTwo.LevelThree">
<option value="">---请选择三---</option>
</select>
</div>
<div class="col-sm-2" ng-show="cLabel.selectedLevelThree&&cLabel.selectedLevelTwo&&cLabel.selectedLevelOne&&cLabel.selectedLevelThree.LevelFour">
<select class="form-control" ng-model="cLabel.selectedLevelFour"  ng-options="LevelFour.name for LevelFour in cLabel.selectedLevelThree.LevelFour">
<option value="">---请选择四---</option>
</select>
</div>
</div>

数据

[
  {
    "code": "99",
    "name": "标准标签",
    "LevelTwo": [
      {
        "code": "9901",
        "name": "客户资产",
        "LevelThree": [
          {
            "code": "990101",
            "name": "资产一",
            "LevelFour": [
              {
                "code": "99010101",
                "name": "资产一子一"
              },
              {
                "code": "99010102",
                "name": "资产一子二"
              }
            ]
          },
         ......
        ]
      },
  ......

在原来的基础上，通过Model和ng-change的配合使用，使多个Select级联。

演变二

<div class=" role-div-cdi clearfix">
    <div class="col-sm-2">
    <select class="form-control"  ng-model="s.info1" ng-change="changeSelect1(s.info1)" ng-options="group.name for group in selectInfo1" >
    <option value="">---请选择一---</option>
    </select>
    </div>
    <div class="col-sm-2" >
    <select class="form-control" ng-model="s.info2"   ng-options="hhh.name for hhh in selectInfo2">
    <option value="">---请选择二---</option>
    </select>
    </div>
</div>

通过Select1 的ng-change事件改变Select2的数据源，实现级联。

---

2、在$ scope域外调用$ scope的方法

element = document.querySelector('[ng-controller=help_controller]');
         var $scope = angular.element(element).scope(); 
          ......
          $scope.$apply();

3、Controller尽量不要取相同的名字；

---

4、ng-repeat有重复值的解决办法

当你传入下面这个数组到Ng-repeat中去的时候就会报错，因为有重复数据，怎么办呢，看下面：

$scope.items = [
     'red',
     'grey',
     'grey'
];

上面的grey明显是数组中重复的数据，传入下面Html中：

<li ng-repeat="item in items" ng-bind="item"></li>

就会报错：

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.28/ngRepeat/dupes?p0=itemNaNn%items&p1=string%3Agrey&p2=%22grey%22

说你的数据有重复的，解决方案如下：

<li ng-repeat="item in items track by $index" ng-bind="item"></li>

---

5、分页插件

页面：

<ul class="pagination" id="pagination"></ul>

初始化：

 $.jqPaginator('#pagination', {
           totalPages: total,
            visiblePages: 3,
            currentPage: currentpage,
            onPageChange: function (num, type) {
                if(type=="change"){
                    ......
                   }

            }
        });

---

6、ng-Class的使用

第一种：

<span ng-class="{'glyphicon  glyphicon-plus': impress.plus, 'glyphicon  glyphicon-minus': impress.minus}" ng-click="swiftTitle(impress)" ></span>

你可以通过ng-click方法来改变impress对象中对应的属性的True或者false，为True的时候就显示对应的Class。

---

第二种：

<div ng-class="{true: 'label-item-content container-fluid label-group-skin', false: 'label-item-content container-fluid'}[iseditor]" ng-show="impress.isshow">

当iseditor的值为True时显示第一个，否则显示第二个。

---

7、Angular中使用a标签

当你像这样

<a href="javascript:void;"></a>

就会报语法错误，最好写成

<a href="javascript:;"></a>

---

8、angular.forEach

angular自带的遍历方法，在一种特殊的情况下，会出现少遍历的情况，如下：

angular.forEach($scope.deleteSelected,function(value,key){
    var len = $scope.myInitLabel.length;
    for(var i=0;i<len;i++){
        if(value.id === $scope.myInitLabel[i].id){
            $scope.myInitLabel.splice(i,1);
        }
    }
})

上面代码中，如果执行删除原集合中的选项，在For循环中的Len长度并没有随着你删除选项执行而改变（事实上，你删除了一个，原先在第二位的移到第一位，这个时候再想删除原先第二个就不行，因为他实际上已经到第一位去了。）

---

解决方案：

angular.forEach($scope.deleteSelected,function(value,key){
    for(var i=0;i<$scope.myInitLabel.length;i++){
        if(value.id === $scope.myInitLabel[i].id){
            $scope.myInitLabel.splice(i,1);
        }
    }
})

就是把集合写在循环中，实时更新集合长度。

---

9、ng-hide/ng-show

ng-hide/ng-show是控制显示隐藏的，但是有一个情况是：当你显示A的时候，不想显示B；显示B的时候不想显示A；

<div class="label-search-common ">
<div class="btn btn-default" ng-click="changeMainWindow()" ng-hide="deleteMask" ng-show="ismainwindow">
<span class="glyphicon glyphicon-plus"></span> <span>添加</span>
</div>
<div class="btn btn-default" ng-hide="ismainwindow" ng-click="changeMainWindow()">
<span class="">返回</span>
</div>
</div>
<div class="label-search-common ">
<div class="btn btn-default" ng-hide="deleteMask" ng-show="ismainwindow"
ng-click="showDeleteMask()">
<span class=" glyphicon glyphicon-minus"></span> <span>删除标签</span>
</div>
<div class="btn btn-default" ng-show="deleteMask"
ng-click="deleteLabel();">
<span class="">确认删除</span>
</div>
<div class="btn btn-default" ng-show="deleteMask"
ng-click="showDeleteMask();">
<span class="">返回</span>
</div>
</div>

上面这两个Div就是这种情况，我省略了它们关联的Div，这样，在切换deleteMask或者ismainwindow的时候不会影响到他们内部的Div的显示与隐藏

---

10、只取一次数据函数

$scope.changeSelect1 = function(info){
$scope.selectInfo2 = [];
if(typeof $scope.initSelectInfo2 != "object"){
    labelCommonServices.test2Service({},function(response){
        $scope.initSelectInfo2 = response;
        angular.forEach(response,function(value,key){
            if(info&&info.code&&(value.forcode == info.code))
                $scope.selectInfo2.push(value);
        })
    },function(response,status){ console.log("dd")});
}else{
    angular.forEach($scope.initSelectInfo2,function(value,key){
        if(info&&info.code&&(value.forcode == info.code))
            $scope.selectInfo2.push(value);
    })
}
}