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

最新推荐文章于 2022-02-17 23:01:15 发布

浪客剑芯

最新推荐文章于 2022-02-17 23:01:15 发布

阅读量5.5k

点赞数

分类专栏： anjularjs 文章标签： angularjs checkbox 前端编辑器

本文链接：https://blog.csdn.net/qq_Dai/article/details/51254547

版权

anjularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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：最终测试效果

这里写图片描述

浪客剑芯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs 动态生成多个checkboxs，但只能选择一个

angularjs 动态生成多个checkboxs，但只能选择一个要求： anjulajs 动态生成前端多个checkbox（复选框），但是只能选择一个步骤： 1：创建一个controller，（我这里单独放一个js文件里面main.js）var app=angular.module('myApp', []);app.controller('PlayerController', ['$scop
复制链接

扫一扫