如何使用angularjs来更改另一个select标记的值



我有两个Web API正在调用。第一个api Type中的每个值都有一个ID,需要用于筛选第二个api,即Category。JSON如下:

// Types
[{"ID":1,"Text":"Hardware","Description":"Hardware"}, 
 {"ID":2,"Text":"Software,"Description":"Software"}"}];
// Categories
[{"ID":1,"TypeID":1,"ParentID":0,"Name":"Printing"}, 
 {"ID":2,"TypeID":1,"ParentID":1,"Name":"Toner"}]

首先,您必须存储将用于筛选另一个数组的selectedTypeID,然后您可以在第二个数组中调用Angular$filter。

Sintax:

$filter('filter')(array, expression, comparator)

例如:

$filter('filter')($scope.categories, {TypeID: $scope.selectedTypeID}, comparator)

我想你在问这个问题:*如何根据另一个select输入中的选择动态填充select输入?

我认为你可以走两条路。如果没有太多的总数据(如Categories(,可以在第二组数据上使用filter。https://docs.angularjs.org/api/ng/filter/filter#!

您可以在HTML或控制器中执行此操作!

<!-- HTML Page -->
<select>
  <option ng-repeat="value in values | filter..." value=value>
</select>
// controller.js
values = ($filter('filter')(result.Values, {Id: $routeParams.Id}));

如果要筛选大量数据,请考虑将对Category API的调用延迟到选择Type

如果没有看到控制器/HTML之类的东西,很难给出具体的答案,但我认为这会让你朝着正确的方向前进。

$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
    $scope.sates = CustomerService.getCountryState($scope.customer.Country);
    $scope.cities =[];
};
<select ng-model="customer.State" 
    ng-options="x.Id as x.state for x in sates"
    ng-change = "getStateCities()"
    class="form-control"
    ng-required="true"
    id="state">
    <option value="">-- Choose State --</option>
</select> 
<select  ng-model="customer.City" 
  ng-options="x.Id as x.city for x in cities"
    class="form-control" 
    ng-required="true"
    id="city">
    <option value="">-- Choose City --</option>
</select>

使用演示检查完整的代码

相关内容

  • 没有找到相关文章

最新更新