javascript - 如何动态访问 ng-model 名称？

Question

如何在我在 ng-click 上调用的 for 循环中动态访问分配给每个 div 的 ng-model 名称？

我的页面中有四个 div，一次我只想显示一个并隐藏其他。我正在尝试使用 ng-show 来做到这一点。

<div ng-show="content0">content0 details here...</div>
<div ng-show="content1">content1 details here... </div>
<div ng-show="content2">content2 details here...</div>
<div ng-show="content3">content3 details here... </div>

Answer 1

尝试：

<div ng-show="current == 0">content0 details here...</div>
<div ng-show="current == 1">content1 details here... </div>
<div ng-show="current == 2">content2 details here...</div>
<div ng-show="current == 3">content3 details here... </div>

并在 ng-click 中将 $scope.current 设置为您要显示的那个。

Answer 2

在模型之外，您将有一个布尔属性来说明它是否被隐藏。您可以在调用 ngClick 时在循环中修改它。

示例：http: //jsfiddle.net/roadprophet/ffKTy/

<div ng-app="app">
    <div ng-controller="MainController">
        <div ng-repeat="thing in things">
            <div ng-show="thing.shown">
                <h3>{{thing.id}}</h3>
            </div>
        </div>
        <button ng-click="flipMode()">FLIP!</button>
    </div>
</div>

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
    $scope.things = [{
        id: 1,
        shown: true
    }, {
        id: 2,
        shown: false
    }, {
        id: 3,
        shown: true
    }, {
        id: 4,
        shown: false
    }, {
        id: 5,
        shown: true
    }, ];
    $scope.flipMode = function () {
        $scope.things.forEach(function (thing) {
            thing.shown = !thing.shown
        })
    };
}]);