angular js 使用了ng-repeat 实现单选及多选效果

作为最开始接触angular js ,单选效果还比较好实现，实现多选这一效果，在请教大神思路后，自己又思考，最终才做出来。逻辑性比较差。

1 、先来说一下单选。

单选实现起来，比较简单,分两步，一步是样式的实现，一步是给后台传值，即点击哪个按钮给后台传哪个值。总的来说有两种实现方式。

  可以通过 ng-repeat 本身带有的属性$index 。

样式的实现  ：ng-class="{{ 'selectedActive':true}}[$index == index]"

功能的实现   : ng-click=''clickFun($index)"        js   $scope.clickFun = function(index){ $scope.index = index   }

2 说一下多选。

多选这个问题用前边代码页面来判断还是比较困难的。

angular js 无非两个理念，双向数据绑定能够实现最好，实现不了我们只能寄希望于js 代码来实现了。

多选的逻辑我也是问了大神，自己又理了半天，才弄明白。无非是我们建立一个数组，如果当前选中的元素在数组中，我们就把当前元素移出数组，如果数组中没有当前元素，我们就把选中的元素push到数组中。这样数组中存放的就是我们选中的多个元素。直接上代码。

for(var i = 0;i<Arr.length;i++){
if(Id==Arr[i]){       //id 为当前选中的id
flag = 1;
tell = i;   //定位当前元素下标，便于删除
break;
}
}
if(flag!=1){
tell = -1;
}

if(tell >= 0){
Arr.splice(tell,1); //元素存在从数组删除

}else{

Arr.push(id);   //不存在push进去

}

样式的实现：如果当前选中的元素在数组中，我们给它加相应的样式。这里不得不提ng-class 的用法了，常规的方法无非是keyvalue 的形式外加【】做判断条件，当然判断条件 现在就不能单纯用$index = index 来界定了，多选与$index无关，只能设定函数 ，返回true，false  来决定是否添加样式了。即ng-class="{{ 'selectedActive':true，‘  ’：false}}[colorActive(id)]"         $scope.colorActive= function(id) { 

for(var i = 0;i<Arr.length;i++){
if(Id==Arr[i]){       //id 为当前选中的id
return true;
}

}

}

习惯了元素单个操作，对ng-repeat 有种种不适应，从条件【】来判断就到这里。 

多选实现了，其中因为业务逻辑，有两个不能同时选中，那么又就需要在多选的基础上进行判断，如果为这两个元素，选其中一个，判断另外一个在不在数组中，存在就把这个元素移出数组，当前的push进去。不存在，直接push 进去，上代码

if(Id=="A"){
for(var i = 0;i<Arr.length;i++){
if(Arr[i]=="B"){
sign = i;  //标志位置
}
}
}
if(Id=="B"){
for(var i = 0;i<Arr.length;i++){
if(Arr[i]=="A"){
sign = i;
}
}
}

if(tell >= 0){
Arr.splice(tell,1);
}else{
for(var i=0;i<Arr.length;i++){
if(Arr[i]=="A"||Arr[i]=="B"){
if(sign!=-1){
Arr.splice(sign,1);
}
}
}
Arr.push(Id);
}

这样就实现了。