代码之家 › 专栏 › 技术社区 › Sherin Green

如何根据JSON数组中的特定属性和角度JS中其他下拉列表的ng模型值过滤ng repeat中的数组

angularjs javascript

Sherin Green · 技术社区 · 6 年前

我想根据他们的酋长国使用安古拉吉列出城市。这意味着当酋长国从一个下拉列表中选择时,城市下拉列表将被过滤为 ng-model 酋长国的价值。但问题是过滤工作正常,但有些城市的唯一ID与区域ID相匹配。例如,如果我从酋长国下拉列表中选择“Ras al-Khaimah”,则其城市“Ras al-Khaimah”将出现在城市下拉列表中,但“Fujairah”也会出现,因为“Fujairah”的唯一ID与“Ras al-Khaimah”的唯一标识。那么我如何过滤城市JSON数组的特定字段 ng-repeat 与 NG型号 酋长国的价值?请检查我的JSON数组,我的代码是:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.emriates = [ 
    { "region_id": "1", "region_name": "Abu Dhabi" },
    { "region_id": "2", "region_name": "Ajman" },
    { "region_id": "3", "region_name": "Dubai" },
    { "region_id": "4", "region_name": "Fujairah" },
    { "region_id": "5", "region_name": "Ras al-Khaimah" },
    { "region_id": "6", "region_name": "Sharja" },
    { "region_id": "7", "region_name": "Umm al-Quwain" }
  ];
  
  $scope.cities = [
    { "city_id": "2", "region_id": "1", "city_name": "Abudhabi" },
    { "city_id": "3", "region_id": "3", "city_name": "Dubai" },
    { "city_id": "4", "region_id": "2", "city_name": "Ajman" },
    { "city_id": "5", "region_id": "4", "city_name": "Fujairah" },
    { "city_id": "6", "region_id": "5", "city_name": "Ras al-Khaimah" },
    { "city_id": "7", "region_id": "6", "city_name": "Sharja" },
    { "city_id": "8", "region_id": "7", "city_name": "Umm al-Quwain" },
    { "city_id": "9", "region_id": "1", "city_name": "Al Ain" },
    { "city_id": "10", "region_id": "3", "city_name": "Jabel Ali" },
    { "city_id": "11", "region_id": "6", "city_name": "kalba" },
    { "city_id": "13", "region_id": "3", "city_name": "Jumeirah" },
    { "city_id": "14", "region_id": "3", "city_name": "Musaffah" }
  ];
});
</script>

<html>
<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <div>
      <label>Emirate
        <select ng-model="emriate">
          <option value="">-Select-</option>
          <option ng-repeat="emt in emriates" value="{emt.region_id}}">                
            {{emt.region_name}}
          </option>
		    </select>
	    </label>
	  </div>
	  <div style="margin-top: 10px;">
      <label>City
        <select ng-model="city">
          <option value="">-Select-</option>
          <option ng-repeat="cit in cities | filter:emriate" value="{cit.city_id}}">
            {{cit.city_name}}
          </option>
        </select>
      </label>
    </div>
  </div>

</body>
</html>

1 回复 | 直到 6 年前

sjahan 6 年前

我认为您只想使用更精确的过滤器;)

你想用 filter:{'region_id': emriate} 而不是 filter:emriate

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.emriates=[ 
{ "region_id": "1", "region_name": "Abu Dhabi" },
 { "region_id": "2", "region_name": "Ajman" },
  { "region_id": "3", "region_name": "Dubai" },
   { "region_id": "4", "region_name": "Fujairah" },
    { "region_id": "5", "region_name": "Ras al-Khaimah" },
     { "region_id": "6", "region_name": "Sharja" },
      { "region_id": "7", "region_name": "Umm al-Quwain" }
       ];

$scope.cities=[ 
{ "city_id": "2", "region_id": "1", "city_name": "Abudhabi" },
 { "city_id": "3", "region_id": "3", "city_name": "Dubai" },
  { "city_id": "4", "region_id": "2", "city_name": "Ajman" },
   { "city_id": "5", "region_id": "4", "city_name": "Fujairah" },
    { "city_id": "6", "region_id": "5", "city_name": "Ras al-Khaimah" },
     { "city_id": "7", "region_id": "6", "city_name": "Sharja" },
      { "city_id": "8", "region_id": "7", "city_name": "Umm al-Quwain" },
       { "city_id": "9", "region_id": "1", "city_name": "Al Ain" },
        { "city_id": "10", "region_id": "3", "city_name": "Jabel Ali" },
         { "city_id": "11", "region_id": "6", "city_name": "kalba" },
          { "city_id": "13", "region_id": "3", "city_name": "Jumeirah" },
           { "city_id": "14", "region_id": "3", "city_name": "Musaffah" },
            { "city_id": "15", "region_id": "10", "city_name": "Error 1" }
           ];
           
$scope.exactFilter = function(value) {
  return value.region_id === $scope.emriate;
};

});


</script>

<htmL>
	<body>
		<div  ng-app="myApp" ng-controller="myCtrl">
			<div>
				<label>Emriate
					<select ng-model="emriate">
						<option value="">-Select-</option>
						<option ng-repeat="emt in emriates" value="{{emt.region_id}}">{{emt.region_name}}</option>
					</select>
				</label>
			</div>
			<div style="margin-top: 10px;">
				<label>City
					<select ng-model="city">
						<option value="">-Select-</option>
						<option ng-repeat="cit in cities | filter:exactFilter" value="{{cit.city_id}}">{{cit.city_name}}</option>
					</select>
				</label>
			</div>
		</div>
	</body>
</htmL>

根据文件( https://docs.angularjs.org/api/ng/filter/filter ,如果使用字符串作为筛选器输入,则可以使用每个属性来匹配此字符串引用的值,因此您希望使用对象传递更精确的筛选器,以指定执行筛选的格式。

编辑

以下是解决方案:只需在您的作用域中添加一个过滤函数:

$scope.exactFilter = function(value) {
  return value.region_id === $scope.emriate;
};

然后用它作为过滤器。

真的,请查看AngularJS文档,所有东西都在里面;)