<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body ng-app="ruiyi" ng-controller="ServiceController">
<section class="info">已选的服务</section>
<section data-ng-repeat="sel in selected">
<label><section ng-click="remServ(sel.name,sel.content)">{{sel.name}}<span class="close">X</span></section></label>
</section>
<div class="menu">
<section class="info">选择所需要的服务类型</section>
<section data-ng-repeat="serv in services">
<label>
<input type="checkbox" id={{serv.id}} name={{serv.name}} ng-checked="isSelected(serv.name)" ng-click="addServ($event,serv.name,serv.content)">{{serv.id}}
{{ serv.name }}{{serv.content}}
</label>
</section>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<style type="text/css"></style>
</html>js
angular.module('ruiyi',[])
.controller('ServiceController',function($scope){
$scope.services=[
{name:"航班",
content:"航班查询:示例XXXX"},
{name:"天气",
content:"天气查询:示例XXXX"},
{name:"行程",
content:"行程查询:示例XXXX"},
{name:"值机",
content:"值机查询:示例XXXX"},
{name:"笑话",
content:"笑话查询:示例XXXX"},
{name:"媒体",
content:"媒体查询:示例XXXX"},
];
$scope.selected = [],//存放已选择名称
$scope.submitForm = function(){
console.log("XXX")
};
$scope.addServ = function($event,name,content){
var checkbox = $event.target
var action = (checkbox.checked?'add':'remove');
if(action==="add"){
$scope.selected.push({name:name,content:content})
for (var i = 0; i < $scope.services.length; i++) {
if($scope.services[i].name===name){
$scope.services.splice(i,1);
break;
}
}
}
}
$scope.remServ = function(name,content){
for (var i = 0; i < $scope.selected.length; i++) {
if($scope.selected[i]===name){
$scope.selected.splice(i,1)
var _sev = {
name:name,
content:content
}
$scope.services.push(_sev);
}
}
}
$scope.isSelected = function(name){
return $scope.selected.indexOf(name)>=0;
}
})ngclick和ngrepeat写在同一个dom里试试