根据AngularJS中Array的值隐藏和显示元素

Question

我有以下HTML代码：

<div ng-controller="DemoController">
            <label class="list-group-item" ng-repeat="option in DesignOptions">
                <input type="radio" name="optionsRadios" value="{{option[0]}}" />
                {{option[1]}}</label>


            <label class="list-group-item" ng-repeat="option in StyleOptions">
                <input type="checkbox" value="{{option[1]}}">
                {{option[2]}}
            </label>
        </div

我有以下AngularJS代码：

<script type="text/javascript">
        var app = angular.module('myApp', []);

        app.controller('DemoController', function ($scope) {

            var json = '{"Table":[[4,"Full"],[5,"Half"]],"Table1":[[4,1,"Elbow Patch"],[5,2,"Roll Up"]]}';
            var obj = $.parseJSON(json);

            $scope.DesignOptions = obj.Table;
            $scope.StyleOptions = obj.Table1;

        });
    </script>

这给了我以下结果：

现在，只有在选中完整单选按钮时才需要显示弯头补丁复选框。选择半单选按钮时卷起。这是因为，如果你看到obj.Table数组，它的Full和obj的id为'4'.Table1的Elbow Patch的id为'4'，依此类推。

我尝试了Angularjs - showing element based on a presence of id in array但是无法修改它以便在我的情况下工作，因为我的数组非常不同。

Answer 1

向控制器添加一个新属性，该属性将存储所选的设计选项：

$scope.designOption = 4;    // default to Full

在视图中将绑定添加到此属性：

<input ng-model="$parent.designOption" type="radio" value="{{option[0]}}" />

将ng-show指令添加到复选框标签：

<label ng-repeat="option in StyleOptions" ng-show='option[0] == designOption'>

我已从元素中删除了类和名称属性，只是为了使代码更清晰。

NB需要在无线电输入上引用$ parent范围，因为ng-repeat指令将为每个重复元素创建一个范围，而javascript原型继承规则意味着仅使用'designOption'将在子范围上创建一个designOption属性而不是使用控制器中的那个。