angularjs functions

1. select 初始化,初始化默认值,获取选中的值

 <select  ng-model="tumoursSelected" ng-options="t.tumourKindName for t in tumoursDatas">
       <option value="-1">请选择</option>
</select>

followupControllers.controller('RoutineController',['$scope','RoutineService',function($scope,RoutineService){
    $scope.$on('$viewContentLoaded', function() {
        $scope.tumours();
        $scope.tumourSelect = "-1";
    });
$scope.tumours = function () {
        RoutineService.queryTumour().then(
            function (data) {
                if(data.data.code == 200){
                    $scope.tumoursDatas = data.data.data;

　　　　　　　　　　　　/*$scope.tumoursDatas.unshift({"tumourKindId":-1,"tumourKindName":"请选择"})*/

　　　　　　　　　　　　$scope.tumoursSelected = $scope.tumoursDatas[0]; } } ) }

2. 显示,隐藏

$scope.visible=false;
    $scope.patientToggle = function(){
        if($scope.visible == false){
            RoutineService.test(1).then(function(data){
                if(data.data.code == 200){
                    $scope.patients = data.data.data;
                }

            });
        }
        $scope.visible = !$scope.visible;
    }

 3. switch

 <ul class="jifaUl" style="margin-left: 20px;" ng-repeat="progres in extractInfo.progress">
                            <li>
                                <div ng-switch="$index">
                                    <p ng-switch-default>转移</p>
                                    <p ng-switch-when="0">确诊</p>
                                </div>

                                <p>{{progres.diagnoseName}}</p>
                                <p>{{progres.createDate | date:'yyyy-MM-dd' }}</p>
                            </li>

                        </ul>

 <div class="row">
            <span>病案号&nbsp;&nbsp;</span><input class="input-text size-S" type="text" style="13%;" value="{{extractInfo.caseNo}}"/>&nbsp;&nbsp;<span class="fa fa-search"></span>
            <span>姓名&nbsp;&nbsp;</span><input class="input-text size-S" type="text" style="13%;" ng-model="searchPatientName"  value="{{extractInfo.patientName}}"/>&nbsp;&nbsp;<span class="fa fa-search" ng-click="nameToggle()"></span>
            <span>性别&nbsp;&nbsp;</span>
            <span ng-switch="extractInfo.gender">
                <input ng-switch-when="1" class="input-text size-S" type="text" style="13%;"  value="男"/>
                <input ng-switch-when="2" class="input-text size-S" type="text" style="13%;"  value="女"/>
            </span>
            <span>末次随诊日期&nbsp;&nbsp;</span><input class="input-text size-S" type="text" style="13%;"  value="{{extractInfo.lastFollowupTime}}"/>&nbsp;&nbsp;
            <span>末次随诊状态&nbsp;&nbsp;</span><input class="input-text size-S" type="text" style="13%;" value="{{extractInfo.lastFollowupState}}"/>&nbsp;&nbsp;
        </div>

4. if

<td ng-if="p.gender == 1">
                            男
                        </td>
                        <td ng-if="p.gender == 2">

5. angular与js相互调用

<div ng-controller="c2_1">
  执行JavaScript表达式：<br/>
  <input type="text" ng-model="expr1"/>
  <button ng-click="testExp1(expr1)">计算</button>
  <br/><br/>
  执行Angular表达式：<br/>
  <input type="text" ng-model="expr2"/>
  <span ng-bind="$eval(expr2)"></span>
</div>
<script>
  angular.module("a2_1", [])
    .controller("c2_1", function($scope) {
      $scope.expr1 = 20;
      $scope.expr2 = '20+1|number:0';
      $scope.testExp1 = function(expr){
        var newv = parseInt(expr) + 1;
        console.log(newv);
      }
    });
</script>

6. ng-repeat中点击某条为某条添加样式

转移$index到变量,在有变量和$index在ng-class中对比

<div ng-controller="c2_11">
  <ul>
    <li ng-class="{{bold}}">
      <span>序号</span>
      <span>姓名</span>
      <span>性别</span>
      <span>是否首条</span>
      <span>是否尾条</span>
    </li>
    <!-- ng-mouseover可替代ng-click -->
    <li ng-repeat=" stu in data "
        ng-class-odd="'odd'"
        ng-class-even="'even'"
        ng-click="li_click($index)"
        ng-class="{focus: $index==focus}"
      >
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{$first?'是':'否'}}</span>
      <span>{{$last?'是':'否'}}</span>
    </li>
  </ul>
</div>
<script>
  angular.module("a2_11", [])
    .controller("c2_11", ['$scope', function($scope) {

      $scope.bold = 'bold';

      $scope.li_click = function(i){
        $scope.focus = i;
      };

      $scope.data = [
        {name: '张明明', sex: '女'},
        {name: '李清思', sex: '女'},
        {name: '刘小华', sex: '男'},
        {name: '陈忠忠', sex: '男'}
      ];
    }])
</script>

7. ng-switch on

<div ng-controller="c2_12">
  <div ng-show="{{isShow}}">陶国荣</div>
  <div ng-hide="{{isHide}}">tao_guo_rong@163.com</div>
  <ul ng-switch on="{{switch}}">
    <li ng-switch-when="1">陶国荣</li>
    <li ng-switch-when="2">tao_guo_rong@163.com</li>
    <li ng-switch-default>更多...</li>
  </ul>
</div>
<script>
  angular.module("a2_12", [])
    .controller("c2_12", ['$scope', function($scope) {
      $scope.isShow = true;
      $scope.isHide = false;
      $scope.switch = 3;
    }])
</script>

8.表单基本验证

ng-show   name.name...

<form name="temp_form" ng-submit="save()" ng-controller="c2_13">
    <div>
      <input type="text" name="t_name" ng-model="name" required/>
      <span ng-show="temp_form.t_name.$error.required">姓名不能为空！</span>
    </div>
    <div>
      <input type="email" name="t_email" ng-model="email" required/>
      <span ng-show="temp_form.t_email.$error.required">邮件不能为空！</span>
      <span ng-show="temp_form.t_email.$error.email">邮件格式不对！</span>
    </div>
    <input type="submit" ng-disabled="temp_form.$invalid" value="提交"/>
  </form>
<script>
  angular.module("a2_13", [])
    .controller("c2_13", ['$scope', function($scope) {
      $scope.name = "陶国荣";
      $scope.email = "tao_guo_rong@163.com";
      $scope.save = function(){
        console.log("提交成功！");
      }
    }])
</script>

9.表单中的checkbox和radio控件

控件初始化:初始化ng-model的值和value的值对应即可

<form name="temp_form" ng-submit="save()" ng-controller="c2_14">
    <div>
      <input type="checkbox" ng-model="a" ng-true-value="'同意'" ng-false-value="'不同意'"/>
      {{a}}
    </div>
    <div>
      性别：
      <input type="radio" ng-model="b" value="男"/>男
      <input type="radio" ng-model="b" value="女"/>女
    </div>
    <input type="submit" value="提交"/>
    <div>{{c}}</div>
  </form>
<script>
  angular.module("a2_14", [])
    .controller("c2_14", ['$scope', function($scope) {
      $scope.a = "同意";
      $scope.b = "男";
      $scope.save = function(){
        $scope.c = "您的选择是： " + $scope.a + " 和 " + $scope.b;
      }
    }])
</script>

10.表单中的select控件

初始化,显示什么,取什么值,怎么取值

 <form name="temp_form" ng-controller="c2_15">
    <div>
      学制：
      <select ng-model="a"
              ng-options="v.id as v.name for v in a_data"
              ng-change="a_change(a)">
        <option value="">--请选择--</option>
      </select>
      <span>{{a_show}}</span>
    </div>
    <div>
      班级：
      <select ng-model="b"
              ng-options="v.id as v.name group by v.grade for v in b_data"
              ng-change="b_change(b)">
        <option value="">--请选择--</option>
      </select>
      <span>{{b_show}}</span>
    </div>
  </form>
<script>
  angular.module("a2_15", [])
    .controller("c2_15", ['$scope', function($scope) {
      $scope.a_data = [
        {id: '1001', name: '小学'},
        {id: '1002', name: '初中'},
        {id: '1003', name: '高中'}
      ];
      $scope.b_data = [
        {id: '1001', name: '(1)班', grade: '一年级'},
        {id: '1002', name: '(2)班', grade: '一年级'},
        {id: '2001', name: '(1)班', grade: '二年级'},
        {id: '2002', name: '(2)班', grade: '二年级'},
        {id: '3001', name: '(1)班', grade: '三年级'},
        {id: '3002', name: '(2)班', grade: '三年级'}
      ];
      $scope.a = "";
      $scope.b = "";
      $scope.a_change = function(a){
        $scope.a_show = "您选择的是：" + a;
      };
      $scope.b_change = function(b){
        $scope.b_show = "您选择的是：" + b;
      }
    }])
</script>

11. 排序(orderBy)方式过滤

对象属性应用直接'属性'

<div ng-controller="c3_1">
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span>姓名</span>
        <span>性别</span>
        <span>年龄</span>
        <span>分数</span>
      </li>
      <li ng-repeat=" stu in data | orderBy : '-score' | limitTo : 3 "
          ng-class-odd="'odd'"
          ng-class-even="'even'"
          ng-click="li_click($index)"
          ng-class="{focus: $index==focus}">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{stu.age}}</span>
        <span>{{stu.score}}</span>
      </li>
    </ul>
  </div>
<script>
  angular.module("a3_1", [])
    .controller("c3_1", ['$scope', function($scope) {
      $scope.bold = "bold";
      $scope.data = [
        {name: '张明明', sex: "女", age: 24, score: 95},
        {name: '李清思', sex: "女", age: 27, score: 87},
        {name: '刘小华', sex: "男", age: 28, score: 86},
        {name: '陈忠忠', sex: "男", age: 23, score: 97}
      ];
      $scope.li_click = function(i){
        $scope.focus = i;
      }
    }])
</script>

12. 匹配(filter)方式过滤

filter参数为函数,只有函数名称,在repeat中使用函数参数默认为当前集合中的元素

<div ng-controller="c3_2">
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span>姓名</span>
        <span>性别</span>
        <span>年龄</span>
        <span>分数</span>
      </li>
      <li ng-repeat=" stu in data | filter: findscore "
          ng-class-odd="'odd'"
          ng-class-even="'even'"
          ng-click="li_click($index)"
          ng-class="{focus: $index==focus}">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{stu.age}}</span>
        <span>{{stu.score}}</span>
      </li>
    </ul>
  </div>
<script>
  angular.module("a3_2", [])
    .controller("c3_2", ['$scope', function($scope) {
      $scope.findscore = function(e){
        return e.score > 85 && e.score < 90;
      };
      $scope.bold = "bold";
      $scope.data = [
        {name: '张明明', sex: "女", age: 24, score: 95},
        {name: '李清思', sex: "女", age: 27, score: 87},
        {name: '刘小华', sex: "男", age: 28, score: 86},
        {name: '陈忠忠', sex: "男", age: 23, score: 97}
      ];
      $scope.li_click = function(i){
        $scope.focus = i;
      }
    }])
</script>

13. 自定义过滤器

自定义过滤器默认传入的参数时集合本身.默认参数类型为返回值类型.

<div ng-controller="c3_3">
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span>姓名</span>
        <span>性别</span>
        <span>年龄</span>
        <span>分数</span>
      </li>
      <li ng-repeat=" stu in data | young : 0 "
          ng-class-odd="'odd'"
          ng-class-even="'even'">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{stu.age}}</span>
        <span>{{stu.score}}</span>
      </li>
    </ul>
  </div>
<script>
  angular.module("a3_3", [])
    .controller("c3_3", ['$scope', function($scope) {
      $scope.bold = "bold";
      $scope.data = [
        {name: '张明明', sex: "女", age: 24, score: 95},
        {name: '李清思', sex: "女", age: 27, score: 87},
        {name: '刘小华', sex: "男", age: 28, score: 86},
        {name: '陈忠忠', sex: "男", age: 23, score: 97}
      ];
    }])

    .filter("young", function() {
      return function(e, type) {
        var _out = [];
        var _sex = type ? "男" : "女";
        for(var i = 0; i < e.length; i++) {
          if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex)
            _out.push(e[i]);
        }
        return _out;
      }
    });
</script>

14. 表头排序

 orderBy : 参数: 参数(boolean),过滤器参数为ng-model时不加引号,为对象中某个字符串字段时要加引号.

<body>
  <div ng-controller="c3_4">
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span ng-click="title='name';desc=!desc">姓名</span>
        <span ng-click="title='sex';desc=!desc">性别</span>
        <span ng-click="title='age';desc=!desc">年龄</span>
        <span ng-click="title='score';desc=!desc">分数</span>
      </li>
      <li ng-repeat=" stu in data | orderBy : title : desc "
          ng-class-odd="'odd'"
          ng-class-even="'even'">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{stu.age}}</span>
        <span>{{stu.score}}</span>
      </li>
    </ul>
  </div>
<script>
  angular.module("a3_4", [])
    .controller("c3_4", ['$scope', function($scope) {
      $scope.title = 'name';
      $scope.desc = 0;

      $scope.bold = "bold";
      $scope.data = [
        {name: '张明明', sex: "女", age: 24, score: 95},
        {name: '李清思', sex: "女", age: 27, score: 87},
        {name: '刘小华', sex: "男", age: 28, score: 86},
        {name: '陈忠忠', sex: "男", age: 23, score: 97}
      ];
    }])
</script>
</body>

15.字符串查找

filter : {},项目中极少用到,可以这么做,但是在项目中多次一举,后台干的事情

<div ng-controller="c3_5">
    <div>
      <input type="text" id="txtkey" ng-model="key" placeholder="请输入姓名关键字"/>
    </div>
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span ng-click="title='name';desc=!desc">姓名</span>
        <span ng-click="title='sex';desc=!desc">性别</span>
        <span ng-click="title='age';desc=!desc">年龄</span>
        <span ng-click="title='score';desc=!desc">分数</span>
      </li>
      <li ng-repeat=" stu in data | filter : {name: key} "
          ng-class-odd="'odd'"
          ng-class-even="'even'">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{stu.age}}</span>
        <span>{{stu.score}}</span>
      </li>
    </ul>
  </div>
<script>
  angular.module("a3_5", [])
    .controller("c3_5", ['$scope', function($scope) {
      $scope.key = '';
      $scope.bold = "bold";
      $scope.data = [
        {name: '张明明', sex: "女", age: 24, score: 95},
        {name: '李清思', sex: "女", age: 27, score: 87},
        {name: '刘小华', sex: "男", age: 28, score: 86},
        {name: '陈忠忠', sex: "男", age: 23, score: 97}
      ];
    }])
</script>

16.$watch方法监听变量

 <div ng-controller="c3_6">
    <div>
      <input type="text" ng-model="name" placeholder="请输入姓名"/>
    </div>
    <div>累计变化次数: {{count}}</div>
  </div>
<script>
  angular.module("a3_6", [])
    .controller("c3_6", ['$scope', function($scope) {
      $scope.count = 0;
      $scope.name = '';
      $scope.$watch('name', function() {
        $scope.count++;
      })
    }])
</script>

17.作用域事件的传播与监听

<body>
  <div ng-controller="c3_9_p">
    <div ng-controller="c3_9_s">
      <button ng-click="to_parent()">向父级传播</button>
      <button ng-click="to_child()">向子级传播</button>
      <div ng-controller="c3_9_c"></div>
    </div>

  </div>
<script>
  angular.module("a3_9", [])
    .controller("c3_9_s", ['$scope', function($scope) {
      $scope.to_parent = function() {
        $scope.$emit('event_1', '事件来源于子级')
      };
      $scope.to_child = function() {
        $scope.$broadcast('event_2', '事件来源于父级');
      }
    }])

    .controller("c3_9_p", ['$scope', function($scope) {
      $scope.$on('event_1', function(event, data) {
        console.log('在父级中监听到 ', data);
      });
    }])

    .controller("c3_9_c", ['$scope', function($scope) {
      $scope.$on('event_2', function(event, data) {
        console.log('在子级中监听到 ', data);
      });
    }]);

</script>
</body>

17. 注入原理

<body>
  <div ng-controller="c4_1">
    <div class="{{cls}}">{{show}}</div>
    <button ng-click="onClick()">点我</button>
  </div>
<script>
  angular.module("a4_1", [])
    .config(function($controllerProvider) {
      $controllerProvider.register('c4_1', ['$scope', function($scope){
        $scope.cls = '';
        $scope.onClick = function() {
          $scope.cls = 'show';
          $scope.show = '点击后显示的内容';
        }
      }])
    })
</script>

18. 依赖注入

<body>
  <div ng-controller="c4_2">
    <div class="{{cls}}">{{text}}</div>
    <button ng-click="onClick(1)">早上</button>
    <button ng-click="onClick(2)">上午</button>
    <button ng-click="onClick(3)">下午</button>
    <button ng-click="onClick(4)">晚上</button>
  </div>
<script>
  angular.module("a4_2", [])
    .config(function($provide) {
      $provide.provider('show_1', function() {
        this.$get = function() {
          return {
            val: function(name) {
              return name;
            }
          }
        }
      })
    })

    .config(function($provide) {
      $provide.factory('show_2', function() {
        return {
          val: function(name) {
            return name;
          }
        }
      })
    })

    .config(function($provide) {
      $provide.value('show_3', function(name) {
        return name;
      })
    })

    .config(function($provide) {
      $provide.service('show_4', function() {
        return {
          val: function(name) {
            return name;
          }
        }
      })
    })

    .controller('c4_2', ['$scope', 'show_1', 'show_2', 'show_3', 'show_4', function($scope, show_1, show_2, show_3, show_4) {
      $scope.cls = "";
      $scope.onClick = function(t) {
        $scope.cls = 'show';
        switch(t) {
          case 1:
            $scope.text = show_1.val("早上好！");
            break;
          case 2:
            $scope.text = show_2.val("上午好！");
            break;
          case 3:
            $scope.text = show_3("下午好！");
            break;
          case 4:
            $scope.text = show_4.val("晚上好！");
            break;
        }
      }
    }]);
</script>
</body>

19.