根據AngularJS中數組中的值隱藏和顯示元素

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的ID為'4'，而Elbow Patch的obj.Table1的ID為'4'，依此類推。

我嘗試了Angularjs-根據數組中存在的id顯示元素，但是由於我的數組非常不同，因此無法修改它以在我的情況下工作。

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'>

我已經從元素中刪除了class和name屬性，只是為了使代碼更清晰。

注意：需要在單選輸入上引用$ parent范圍，因為ng-repeat指令將為每個重復的元素創建一個范圍，而javascript原型繼承規則意味着僅使用'designOption'將在子范圍上創建一個designOption屬性，而不使用控制器中的那個。