[英]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時將顯示文本1和隱藏其他,單擊id-2時將顯示文本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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.