Как фильтровать массив в ng-repeat на основе определенного атрибута в этом массиве json и значения ng-модели другого раскрывающегося списка в угловых js - PullRequest
Новая
       2

Как фильтровать массив в ng-repeat на основе определенного атрибута в этом массиве json и значения ng-модели другого раскрывающегося списка в угловых js

0 голосов
/ 12 июня 2018

Я хочу перечислить города на основе их эмиратов, используя angularJS.Это означает, что когда эмират выбирается из одного раскрывающегося списка, тогда раскрывающийся список городов фильтруется со значением ng-model эмирата.Но проблема заключается в фильтрации работ, но уникальный идентификатор некоторых городов сопоставляется с идентификатором региона.Например, если я выберу «Рас-эль-Хайма» из выпадающего списка эмирата, то его город «Рас-эль-Хайма» появится в выпадающем списке городов, но там также появится «Фуджейра», потому что уникальный идентификатор «Фуджейра» совпадает с уникальнымid "Рас Аль Хайма".Итак, как я могу отфильтровать определенные поля городского JSON-массива в ng-repeat со значением ng-model эмирата?Пожалуйста, проверьте мой массив 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 Ответ

0 голосов
/ 12 июня 2018

Я думаю, вы просто хотите использовать более точный фильтр;)

Вы хотите использовать 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, там все есть;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...