AngularJS单选、复选框

程序员文章站 2022-07-01 18:56:40

...

　　在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：

一.AngularJS radio单选实例

　　在页面上有几个项目名称，每个名称前面都有一个checkbox，如果打上勾，则表示这个项目已经完成，如果没有打钩，则表示未完成。

　　然后在下方设置一个输入框，用来输入新增加项目的名称，再下边是两个radio按钮，只能选择一个，用来选择新增肌的项目的完成情况。最后是一个提交按钮，表示添加一个新的项目。

AngularJS单选、复选框

博客分类： AngularJS AngularJSradio

新增Name为Android，选择finished单选框，点击“Add a new item”按钮，就会出现在上面的列表中。

<!DOCTYPE html>
<html ng-app="todolist">
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS单选多选</title>
</head>
<body>
<div ng-controller="TodolistController">
    <ul>
        <!--循环遍历作用域下的items，即（$scope.items），并重复克隆这个HTML元素li-->
        <li ng-repeat="item in items">
            <!--当checkbox绑定的值为true时，页面中会打上对勾-->
            <input type="checkbox" ng-model="item.finished"><span ng-bind="item.name"></span>
        </li>
    </ul>
    <hr>
    <!--绑定作用域对象的一个数据模型name，这个那么变量随时获取输入框输入的内容-->
    Name:<input type="text" ng-model="name">

    <p></p>
    <label>
        <!--
        有两个radio标签，必须有相同的name才能实现二选一的效果
        通过ng-value里不同的值，实现选择不同radio有不同值。然后两个radio又绑定着相同的数据模型，这样就可以实现当选择不同的radio时，绑定的数据模型变量会有不同的值。
        -->
        <input type="radio" ng-value=true ng-model="state" name="selectState">finished
    </label>
    <label>
        <input type="radio" ng-value=false ng-model="state" name="selectState">unfinished
    </label>

    <!--这里是把这个数据模型显示出来，为了测试其值是否正确。可以省略掉-->
    <p>{{state}}</p>
    <!--当点击按后，执行一个函数-->
    <button type="button" ng-click="addItem()">Add a new item</button>
</div>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index01.js"></script>
</body>
</html>

index01.js

//先预定义几个项目的名称和完成的状态。
var items = [
	{name: 'Javascipt', finished: true},
	{name: 'AngularJS', finished: true},
	{name: 'NodeJS', finished: false},
	{name: 'MongoDB', finished: false}
];
//注册一个模块
var todolistModule = angular.module('todolist', []);
//注册一个控制器
todolistModule.controller('TodolistController', ['$scope', function ($scope) {
	//把外围的是对象数组的引用传递给模块作用域的数据模型items中
	$scope.items = items;
	//把输入框的内容初始化为空
	$scope.name = '';
	//给作用域添加函数方法
	$scope.addItem = function () {
		//因为将来要插入的都是对象，所以先定义一个空的对象
		var newItem = {};
		//分别把DOM中绑定的值赋给这个新定义对象的两个属性
		newItem.name = $scope.name;
		newItem.finished = $scope.state;
		//在数组的末尾追加对象元素
		items.push(newItem);
	};
}]);

二.AngularJS判断checkbox/复选框是否选中并实时显示

　　做一个选择标签的功能，把一些标签展示给用户，用户选择自己喜欢的标签，就类似我们在购物网站看到的那种过滤标签似的，简单的效果如图所示：

AngularJS单选、复选框

博客分类： AngularJS AngularJSradio

index01.html

<!DOCTYPE html>
<html data-ng-app="App">
<head>
	<title>AngularJS单选多选按钮</title>
</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>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index02.js"></script>
</html>

　　<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">，它存储了tag的id，name，利用isSelected(tag.id)来判断是否被checked，点击时候调用updateSelection($event,tag.id)方法；如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入this ，而需要传入。因为在里面，这个地方的是event。因为在Angularjs里面，这个地方的this是scope 。我们可以传入，然后在函数里面通过event，然后在函数里面通过event.target 来获取到该元素。

index02.js

var 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;
    }
});

　　updateSelection方法，这个方法会在html页面的checkbox被点击时调用，它通过$event变量来获取点击的dom元素，通过checkbox的当前状态来决定是add操作还是remove操作，然后调用updateSelected方法，更新数据。

　　而isSelected方法，用来判断ID为id的checkbox是否被选中，然后传值给页面的ng-checked指令。

　　不过，我总觉得这种实现方法，不太符合Angularjs以模型为中心的思想。

三.angularjs实现checkbox全选、反选

　　有个总的checkbox 负责全选和反选，当每一项开头都选中checkbox的时候，上面的全选自动选上；当全选后，取消其中一项的checkbox，全选取消。

AngularJS单选、复选框

博客分类： AngularJS AngularJSradio

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
	<title>AngularJS checded</title>
</head>
<body>
    <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>{{i.id}}</span>
			</li>
		</ul>
	</div>
</body>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index03.js"></script>
</html>

index03.js

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.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);
    }
}]);

　　给数组里面每一个list 绑定checked 的属性。

四.利用ngValue

<!DOCTYPE html>
<html data-ng-app="valueExample">
<head>
	<title>AngularJS checded</title>
</head>
<body>
     <form ng-controller="ExampleController">
	   <h2>Which is your favorite?</h2>
		 <label ng-repeat="name in names" for="{{name}}">
			<input type="radio"
				  ng-model="my.favorite"
				  ng-value="name"
				  id="{{name}}"
				  name="favorite">
		   {{name}}
		 </label>
	   <div>You chose {{my.favorite}}</div>
	 </form>
</body>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index04.js"></script>
</html>

index04.js

angular.module('valueExample', [])
	.controller('ExampleController', ['$scope', function($scope) {
		$scope.names = ['pizza', 'unicorns', 'robots', 'jade'];
		$scope.my = { favorite: 'unicorns' };
	}]);

运行效果：

AngularJS单选、复选框

博客分类： AngularJS AngularJSradio