时间戳

首页 > 解决方案 > 如何根据该json数组中的特定属性和angular js中其他下拉列表的ng-model值过滤ng-repeat中的数组

javascript - 如何根据该json数组中的特定属性和angular js中其他下拉列表的ng-model值过滤ng-repeat中的数组

问题描述

我想使用 angularJS 根据他们的酋长国列出城市。这意味着当从一个下拉列表中选择一个酋长国时，城市下拉列表将使用ng-modelemirate 的值进行过滤。但问题是过滤工作，但一些城市的唯一 ID 与区域 ID 匹配。例如，如果我从 emirate 下拉列表中选择“Ras al-Khaimah”，则其城市“Ras al-Khaimah”出现在城市下拉列表中，但“Fujairah”也出现在那里，因为“Fujairah”的唯一 ID 与唯一 ID 相同“Ras al-Khaimah”的 ID。那么如何使用 emirateng-repeat的ng-model值过滤城市 JSON 数组的特定字段呢？请检查我的 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>

标签： javascriptangularjs

解决方案

我认为您只想使用更准确的过滤器；）

你想使用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 文档，一切都在那里；）

推荐阅读