深究AngularJS——ng-checked(回写:带真实案例代码)
2019/6/27 20:54:43
本文主要是介绍深究AngularJS——ng-checked(回写:带真实案例代码),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.需求
在添加页面实现一个checkbox的选择,然后在详情页面展示时,会自动选上之前被选中的。
2.添加页面
看官最好将这个代码复制过去看看效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl" > 选择 <div ng-repeat="item in list"> <input type="checkbox" name="tagName" value="item.id" ng-click="select(item.id,$event)"> {{item.shortName}} </div> 结果:{{result}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //创建checkbox用的 $scope.list=[{"id":1,"shortName":"张三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}]; //存储已选 $scope.result = []; //触发事件 $scope.select = function(id,event){ console.log(event)//打印看看这是什么,有利于理解 console.log(action) var action = event.target; if(action.checked){//选中,就添加 if($scope.result.indexOf(id) == -1){//不存在就添加 $scope.result.push(id); } }else{//去除就删除result里 var idx = $scope.result.indexOf(id); if( idx != -1){//不存在就添加 $scope.result.splice(idx,1); } } }; }); </script> </body> </html>
3.详情展示
//假设添加页面的结果是:$scope.result = [3,2]; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl" > 回写时设置不可选,即设ng-disabled="true" <div ng-repeat="item in list"> <input type="checkbox" name="tagName" ng-checked="isSelected(item.id)" value="item.id" ng-disabled="true" > {{item.shortName}} </div> 结果:{{result}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //创建checkbox用的 $scope.list=[{"id":1,"shortName":"张三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}]; //在添加页面得到的结果 //你会发现,顺序也不会影响结果 $scope.result = [3,2]; //被选中条件:ng-checked的结果为true $scope.isSelected = function(id){ return $scope.result.indexOf(id)!=-1; //只要返回的结果为true,则对应的checkbox就会被选中, //所以我的思路是看存添加页面的结果里是否含有当前id即value值, //有就返回的true,没有就返回false }; }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于深究AngularJS——ng-checked(回写:带真实案例代码)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist