zoukankan      html  css  js  c++  java
  • angularjs 功能点

    1. 枚举过滤器

    var AppFilters = angular.module('illCaseListApp.filters', []);
    
    AppFilters..filter('gender', function() {
          return function(input) {
            var array=new Array("未知的性别","","","未说明的性别");
            if (input) {
                switch(input)
                {
                    case 0:
                    case 1:
                    case 2:
                        return array[input];
                        break;
                    case 9:
                        return array[3];
                        break;
                    default:
                        return "error";
                }
            }
          }
        })
    在ng-repeat中
    <td>{{medicalCardResultModel.gender|gender}}</td>

     全选反选

    这里关键是使用checkbox的checked属性添加到ng-model上

    <div ng-controller="myController">
        <label for="flag">全选
            <input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
        </label>
        <ul>
            <li ng-repeat="i in list">
                <input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
                <span>{{id}}</span>
            </li>
        </ul>
    </div>
    var app = angular.module('myApp',[]);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.list = [
            {'id': 101},
            {'id': 102},
            {'id': 103},
            {'id': 104},
            {'id': 105},
            {'id': 106},
            {'id': 107}
        ];
        $scope.m = [];
        $scope.checked = [];
        $scope.selectAll = function () {
            if($scope.select_all) {
                $scope.checked = [];
                angular.forEach($scope.list, function (i) {
                    i.checked = true;
                    $scope.checked.push(i.id);
                })
            }else {
                angular.forEach($scope.list, function (i) {
                    i.checked = false;
                    $scope.checked = [];
                })
            }
            console.log($scope.checked);
        };
        $scope.selectOne = function () {
            angular.forEach($scope.list , function (i) {
                var index = $scope.checked.indexOf(i.id);
                if(i.checked && index === -1) {
                    $scope.checked.push(i.id);
                } else if (!i.checked && index !== -1){
                    $scope.checked.splice(index, 1);
                };
            })
    
            if ($scope.list.length === $scope.checked.length) {
                $scope.select_all = true;
            } else {
                $scope.select_all = false;
            }
            console.log($scope.checked);
        }
    }]);
  • 相关阅读:
    SDN课程阅读作业(2)
    2019 SDN上机第5次作业
    第05组 Alpha事后诸葛亮
    第05组 Alpha冲刺(4/4)
    2020-4-5助教一周小结
    2020-3-29助教一周小结
    2020-3-22助教一周小结
    2020-03-15助教一周小结
    2020-03-08助教一周小结
    第一次个人编程作业(个人实现)
  • 原文地址:https://www.cnblogs.com/yangfei-beijing/p/6605420.html
Copyright © 2011-2022 走看看