Question

我是角度js编程的新手，所以如果我的问题很天真，请原谅。我根据json对象内的值填充了一个复选框列表。我正在使用ng-repeat来遍历键列表＆amp;收到的价值和显示复选框。单击每个复选框时，我正在进行服务器调用以获取相关数据。我收到的数据只有在点击时才会填入下拉列表中。取消单击时，下拉列表应消失。我想在用户选择它后捕获下拉选择选项。我被困在如何得到它。

我的参考代码：

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 }">

如何在选择循环角度js中创建的任何一个复选框后显示下拉框

1 个答案: