anglar js 做复选框

来源：互联网发布：上传图片平台知乎编辑：程序博客网时间：2024/05/21 09:39

html:

<!DOCTYPE html><html data-ng-app="App"><head>    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>    <script src="script2.js"></script></head><body data-ng-controller="AddStyleCtrl">    <div>Choose Tags</div>        <div>        <div>You have choosen:</div>        <hr>        <label data-ng-repeat="selectedTag in selectedTags">            (({{selectedTag}}))        </label>        <hr>        <div data-ng-repeat="category in tagcategories">            <div>{{ category.name }}</div>            <div data-ng-repeat="tag in category.tags">                <div>                    <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">                    {{ tag.name }}                </div>            </div>            <hr>        </div>    </div><pre>{{selected|json}}</pre><pre>{{selectedTags|json}}</pre></body></html>

然后看看AngularJS代码：

/** * Created by zh on 20/05/15. */// Code goes herevar iApp = angular.module("App", []);iApp.controller('AddStyleCtrl', function($scope){    $scope.tagcategories = [        {            id: 1,            name: 'Color',            tags: [                {                    id:1,                    name:'color1'                },                {                    id:2,                    name:'color2'                },                {                    id:3,                    name:'color3'                },                {                    id:4,                    name:'color4'                },            ]        },        {            id:2,            name:'Cat',            tags:[                {                    id:5,                    name:'cat1'                },                {                    id:6,                    name:'cat2'                },            ]        },        {            id:3,            name:'Scenario',            tags:[                {                    id:7,                    name:'Home'                },                {                    id:8,                    name:'Work'                },            ]        }    ];    $scope.selected = [];    $scope.selectedTags = [];    var updateSelected = function(action,id,name){        if(action == 'add' && $scope.selected.indexOf(id) == -1){            $scope.selected.push(id);            $scope.selectedTags.push(name);        }        if(action == 'remove' && $scope.selected.indexOf(id)!=-1){            var idx = $scope.selected.indexOf(id);            $scope.selected.splice(idx,1);            $scope.selectedTags.splice(idx,1);        }    }    $scope.updateSelection = function($event, id){        var checkbox = $event.target;        var action = (checkbox.checked?'add':'remove');        updateSelected(action,id,checkbox.name);    }    $scope.isSelected = function(id){        return $scope.selected.indexOf(id)>=0;    }});

出处： http://www.cnblogs.com/CheeseZH/

阅读全文

0 0