使用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>