需求:通过ng-repeat动态生成的CheckBox,实现勾选控制对应的批次号。如图:
html:
1 <div class="clearfix"> 2 <div class="form-inline margin-top-20"> 3 <button class="btn btn-xs btn-info" ng-click="addMore()">批量新增</button> 4 <button class="btn btn-xs btn-info margin-left-20" ng-click="addOne()">手动新增</button> 5 6 </div> 7 <table class="table table-bordered table-striped table-center" style="margin-top: 20px; 400px;"> 8 <thead> 9 <tr> 10 <th rowspan="2" class="inner" style="vertical-align: middle !important;">批次号</th> 11 <th rowspan="2" style="vertical-align: middle !important;">是否展示</th> 12 13 </tr> 14 </thead> 15 <tbody> 16 <tr ng-repeat="(index,tabledata) in channels"> 17 <td ng-bind='tabledata.batch_name'></td> 18 19 <td> 20 <!-- {{$parent.conf[$index]}} --> 21 <label> 22 23 <input type="radio" value="1" ng-model="$parent.conf[$index]"> 24 是 25 </label> 26 <label> 27 <input type="radio" value="0" ng-model="$parent.conf[$index]"> 28 否 29 </label> 30 </td> 31 </tr> 32 </tbody> 33 </table> 34 35 </div>
js:
1 $scope.conf = []; 2 3 $scope.channelNum = function (id) { 4 $http({ 5 method: "POST", 6 contentType: "application/json", 7 url: "/Rest/Urlchannel/batchList", 8 data: { 9 channel_id:id, 10 11 }, 12 dataType : "json", 13 headers: { 14 'Content-Type': 'application/x-www-form-urlencoded', 15 'token':userInfo.token 16 }, 17 transformRequest: function(obj) { 18 var str = []; 19 for (var p in obj) { 20 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 21 } 22 return str.join("&"); 23 } 24 25 }).then(function(res) { 26 if(res.data.code == 200){ 27 $scope.channels=res.data.data; 28 angular.forEach($scope.channels,function(value,index,array){ 29 30 $scope.conf[index] = value.is_view; 31 }) 32 // location.reload(); 33 }else { 34 tips.text(res.data.msg); 35 36 } 37 38 }).then(null,function(xhr) { 39 if (xhr && xhr.message) { 40 tips.text(xhr.message); 41 } else { 42 tips.text('网络出错,请稍候再试!'); 43 } 44 }); 45 } 46 $scope.channelNum ($scope.id);
参考文章:http://blog.csdn.net/itfootball/article/details/51455839