angularjs 动态生成多个checkboxs,但只能选择一个

angularjs 动态生成多个checkboxs,但只能选择一个

要求:
anjulajs 动态生成前端多个checkbox(复选框),但是只能选择一个

步骤:
1:创建一个controller,(我这里单独放一个js文件里面main.js)

var app=angular.module('myApp', []);
app.controller('PlayerController', ['$scope', function($scope) {
  $scope.entities = [{
      name: '第一个复选框测试1',
      checked: false
    }, {
      name: '第一个复选框测试2',
      checked: false
    }, {
      name: '第一个复选框测试3',
      checked: false
    }, {
      name: '第一个复选框测试4',
      checked: false
    }
  ];
  //前台选择后的一个交互事件(函数)
    $scope.updateSelection = function(position, entities) {
      angular.forEach(entities, function(subscription, index) {
        if (position != index) 
          subscription.checked = false;
      });
    }
}]);

2:创建前台显示页面(我这里用index.html)

<!DOCTYPE html > <html ng-app="myApp" > <head> <!--引入angualrs--> <script type="text/javascript" src="js/angular.js"></script> <!--引入前面写的控制器JS--> <script type="text/javascript" src="js/main.js" ></script> <title>ng-bind directive</title> </head> <body > <div ng-controller="ChexkboxsTest"> <table> <tr ng-repeat="subscription in entities"> <td> <input type="checkbox" ng-model="subscription.checked" ng-click="updateSelection($index, entities)"/>{{subscription.name}} </td> </tr> </table> </div> </body> </html> 

3:最终测试效果

你可能感兴趣的:(AngularJS,前端,checkbox,编辑器)