html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 中 CheckBox的简单案例title>
<script src="../js/angular.js">script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.data = [
{
key:"A",
value:"A：紫气东来"
},
{
key:"B",
value:"B：西天极乐"
},
{
key:"C",
value:"C：南极仙翁"
},
{
key:"D",
value:"D：北国风光"
}
];
//定义空数组
$scope.arr = [];
//点击选项时的点击事件
$scope.fun = function (flag,text) {
//当flag标志位为true时,即此时选中某一选项，就使用push方法添加对应的选项值到数组中最后的位置
if(flag){
$scope.arr.push(text);
}else {
//否则，当flag标志位为false时,遍历数组内容，删除点击的选项值对应的数组数据
for (i in $scope.arr){
if ($scope.arr[i] == text){
$scope.arr.splice(i,1);
}
}
}
}
//点击“选择”按钮时的点击事件
$scope.check = function () {
//当选择的选项内容没有添加到数组中时，即一项都没选中，此时数组长度为0，就弹出提示： 请选择选项所代表的内容！
if ($scope.arr.length == 0){
alert("请选择选项！");
}
//如果此时选中某一选项，就弹出对应的选项值
else {
alert($scope.arr);
}
};
});
script>
head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
请问，你喜欢下面哪个成语呢？
<button ng-click="check()">我选择button>
<ul ng-repeat="i in data">
<input type="checkbox"
ng-value="i.key"
ng-model="flag"
ng-click="fun(flag,i.key)"
/>
{{i.value}}
ul>
center>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
