AngularJS-过滤下拉列表中的值

时间:2019-07-18 11:45:10

标签: json angularjs

我一直在处理下拉列表,虽然我知道HTML可以正常工作,但似乎无法正确地将值填充到列表中。我什至似乎都无法进入所提供的代码中的for循环,我丢失了什么吗?

AngularJS:

$scope.vendorUserList = [];
SpringDataRestService.get(
    {
        "collection": "user"
    },
    function (response) {
        var users = response;
        for (var i = 0, len = users.length; i < len; i++) {
            if (users[i].type === "VENDOR") {
                if (users[i].status !== "PENDING_DEACTIVATION") {
                    var newUser = {id: users[i].id, name: users[i].name};
                    $scope.vendorUserList.push(newUser);
                }
            }
        }
    },
    }
);

JSON:

http://localhost:8080/api/users

{
    "status": "ACTIVE",
    "userName": "CLIENT 2"
}

1 个答案:

答案 0 :(得分:0)

我使用AngularJS $http.get首先返回整个用户列表,然后使用您的代码过滤掉了居住在Wisokyburgh市中也有邮政编码的用户(稍作修改)。

var root = 'https://jsonplaceholder.typicode.com';

// Create an Angular module named "usersApp"
var app = angular.module("usersApp", []);

// Create controller for the "usersApp" module
app.controller("usersCtrl", ["$scope", "$http", function($scope, $http) {
  $scope.vendorUserList = [];
  var url = root + "/users"
  $http.get(url)
    .then(function(data) {
      var users = data.data;
      console.log(users);
      for (var i = 0; i < users.length; i++) {
        if (users[i].address.city === "Wisokyburgh") {
          if (users[i].address.zipcode !== "") {
            var newUser = {
              id: users[i].id,
              name: users[i].name
            };
            $scope.vendorUserList.push(newUser);
          }
        }
      }
      console.log($scope.vendorUserList);
    });
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<div class="container" data-ng-app="usersApp">
  <div data-ng-controller="usersCtrl">
    <select>
      <option value="0">Choose from the list</option>
      <option ng-repeat="user in vendorUserList" value="user.id">{{user.name}}</option>
    </select>
  </div>
</div>

这种情况与您的情况类似,但是url是公开的(必须是公开的,以便代码段起作用)。希望对您有所帮助。