如何顯示下拉框後選擇任何一個複選框創建的循環角js

Question

我是新的角js編程所以請原諒我，如果我的問題是天真的。 我正在根據json對象內的值填充複選框列表。 我正在使用ng-repeat遍歷鍵列表&收到的值&顯示覆選框。當每個複選框被點擊時，我正在進行服務器調用以獲取相關數據。我收到的數據只能在點擊時填充到下拉列表中。&下拉菜單應該在未點擊時消失。我想在用戶選擇後捕捉下拉選擇選項。 我被困在如何得到它。

我參考代碼：

HTML：

<div class="container" ng-controller="OptionsController" > 
     <div ng-repeat="(key, value) in options" ng-if="value === 'text'"> 
    <!--   {{key}} : {{value}}--> 
      <input type="checkbox" ng-click="getDistinct(key)"/> 
       <label>{{key}} 
      </label> 
     <div class="animate-show"> 
     <select id="selector" ng-model="QueryFormData.Graph.selected"> 
      <option ng-repeat="name in QueryFormData.Graph.options" 
        ng-value="name">{{name}}</option> 
     </select> 
     </div> 
     </div> 
</div> 

控制器代碼：

myApp.controller('OptionsController', ['$scope', '$http', '$location', 'datashare', 
    function($scope, $http, $location, datashare) { 
    //$scope.options = datashare.jsonData; 
    $scope.options = { 
     "_id": "571a0fcfaa6d92581ec99b2e", 
     "Name": "text", 
     "isstring": "text", 
     "value1": "number", 
     "value": "number", 
     "status": "text", 
     "ItantaTime": "time" 
    }; 
    $scope.keyArr = []; 
    $scope.QueryFormData = { 
     Graph: { 
     options: [ 
      'Line Graph' 
     ], 
     selected: 'Line Graph' 
     }, 
     displayValue: '' 
    }; 
    $scope.getDistinct = function(key) { 
     if ($scope.keyArr.indexOf(key) == -1) { 
     $scope.keyArr.push(key); 
     var ServerAddr = "http://localhost:2000/getDistinct/" + key; 
     console.log("Server Addr :" + ServerAddr); 
     $http.get(ServerAddr, { 
      headers: { 
       'Content-Type': 'application/json' 
      } 
      }) 
      .success(function(result) { 
      console.log(result); 
      }) 
      .error(function(data, status) { 
      console.log(data) 
      }); 
     } 
     console.log("changed : " + key); 
    }; 
    } 
]); 

隨着當前的代碼，我看到所有的下拉菜單一次。我想在選擇複選框時將下拉列表顯示爲切換功能。

任何幫助，高度讚賞。

Answer 1

首先，你不需要ng-if。使用內置過濾器：

<div ng-repeat="(key, value) in options" ng-if="value === 'text'"> 

可以是

<div ng-repeat="(key, value) in options | filter: { value: 'text' }"> 

爲您篩選的問題，您可以再次使用filter在select元素只得到你想要的下拉值。您的JSON響應必須具有可過濾的屬性，所以請發佈您的JSON。

你使用這樣的：

<select ng-options="item.key as item.name for item in collection| filter:{ someProperty: true }">