wie Dropdown-Box nach der Auswahl eines der Checkbox in Schleife eckig js gezeigt

Question

Ich bin neu in eckigen js Programmierung so bitte entschuldigen Sie mich, wenn meine Frage naiv ist. Ich bevölke eine Liste von Checkboxen abhängig von Werten innerhalb eines JSON-Objekts. Ich benutze ng-repeat, um durch die Liste der Schlüssel zu durchlaufen & Werte erhalten & das Kontrollkästchen anzeigen. Wenn jedes Kontrollkästchen angeklickt wird, führe ich einen Serveranruf durch, um relevante Daten zu erhalten. Die Daten, die ich erhalte, sollten in einer Dropdown-Liste nur dann ausgefüllt werden, wenn auf & geklickt wird. Das Dropdown-Menü sollte bei Nicht-Klick verschwinden. Ich möchte die ausgewählte Dropdown-Option erfassen, nachdem der Benutzer sie ausgewählt hat. Ich bin fest, wie man es bekommt.

Mein Code als Referenz:

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> 

Controller-Code:

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); 
    }; 
    } 
]); 

Mit aktuellen Code, den ich auf einmal alle Dropdown-Listen sehe. Ich möchte die Dropdown-Menüs als Umschaltfunktion für die Kontrollkästchen anzeigen.

Jede Hilfe wird sehr geschätzt.

Answer 1

Zuerst brauchen Sie nicht ng-if. Verwenden Sie den eingebauten Filter:

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

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

Für Ihre Filterproblem sein kann, können Sie wieder verwenden, um die filter in select Elemente nur erhalten Sie die Drop-Down-Werte, die Sie wollen. Ihre JSON Antwort muss jedoch eine filterbare Eigenschaft haben ... Also, bitte posten Sie Ihre JSON.

Sie verwenden es wie folgt aus:

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