angularjs ng-click传参控制ng-repeat元素显示与隐藏
生活随笔
收集整理的這篇文章主要介紹了
angularjs ng-click传参控制ng-repeat元素显示与隐藏
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
ng-click傳參控制ng-repeat元素顯示與隱藏
說明：
1、使用ng-repeat顯示參數(shù)
2、通過ng-click按鈕顯示或隱藏內(nèi)容。通過添加shows和id兩個參數(shù)控制顯示。
<!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="personCtrl" ng-init="names=[ {name:'Jani',country:'Norway',shows:'true',id:0}, {name:'Hege',country:'Sweden',shows:'true',id:1}, {name:'Kai',country:'Denmark',shows:'true',id:2}]"><button ng-click="toggle()">隱藏/顯示</button><div ng-repeat='item in names'><div ng-hide="item.shows">OKOK</div><button ng-click="showItemId(item.id)">{{item.name}}</button></div>Javascript:<p ng-hide="myVar">名:<input type=text ng-model="firstName"><br> 姓:<input type=text ng-model="lastName"><br><br> 姓名: {{firstName + " " + lastName}}</p></div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) {$scope.firstName = "John",$scope.lastName = "Doe"$scope.myVar = false;$scope.showItemId = function(itemId) {$scope.names[itemId].shows = false;alert("Item Id 是 " + itemId);};$scope.toggle = function() {$scope.myVar = !$scope.myVar;}});</script></body></html>總結(jié)
以上是生活随笔為你收集整理的angularjs ng-click传参控制ng-repeat元素显示与隐藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 本程序主要实现了一个方阵的求逆与实现了逆
- 下一篇： 构建器