ng-hide & ng-show in AngularJS
ng-hide & ng-show in AngularJS
使用AngularJS,我想以切换方式显示和隐藏与特定id相关的数据。
我的 JSON 数据格式如下:
$scope.things = [{
id: 1,
data: 'One',
shown: true
}, {
id: 2,
data: 'Two',
shown: false
}, {
id: 3,
data: 'Three',
shown: true
}, ];
我想要的是当单击id-1时,它将显示文本一并隐藏其他文本,单击id-2将显示文本二并隐藏其他文本,依此类推。
这是我尝试的小提琴:jsfiddle:演示链接
我更新了你的代码
$scope.flipMode = function (id) {
$scope.things.forEach(function (thing) {
if(id == thing.id){
thing.shown = true;
}
else{
thing.shown = false;
}
})
};
<a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>
这是工作小提琴
它应该可以工作
$scope.flipMode = function (id) {
$scope.things.forEach(function (thing) {
if(thing.id === id) {
thing.shown = true;
return;
}
thing.shown = false;
})
};
<div ng-repeat="thing in things">
<a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>
</div>
分叉工作解决方案:http://jsfiddle.net/nypmmkrh/
更改示波器功能:
$scope.flipMode = function (id) {
$scope.things.forEach(function(thing) {
if(thing.id == id) {
thing.shown = true;
} else {
thing.shown = false;
}
});
};
并在视图中传递 id:
<a href="#" ng-click="flipMode(thing.id)">{{thing.id}}</a>
相关文章:
- Instagram oauth flow in angularjs
- 如何获得家长's的父's的父's id in Angularjs
- 进度条与 ngRoute in angularjs.
- Jquery in AngularJs
- ng-class not working properly in 'AngularJs'
- limitTo not working in ng-repeat in AngularJs
- ElasticSearch to NVD3 in Angularjs
- Defer 和 Promise in angularjs 无法正常工作
- startWith filter with object in AngularJS
- HTTPS 'GET' in AngularJS
- Stacking Directives in angularJS
- Asynchronus calls in angularjs
- ngAnimate parent vs child in AngularJS 1.2
- Dynamic creation og Highcharts in Angularjs
- Chained Promis in angularjs
- Array in Angularjs Expression
- ng-hide & ng-show in AngularJS
- GetElementById in AngularJS
- JavaScript Scope within factories in AngularJS
- 相对模板Url in 指令 in AngularJS.