Как использовать нг, если условие в одном div для нескольких условий - PullRequest
Новая
       9

Как использовать нг, если условие в одном div для нескольких условий

0 голосов
/ 11 января 2019

У меня есть выпадающий список, и элементы div поступают из цикла. Здесь, когда я изменяю опцию выпадающего меню на город, мой идентификатор div должен измениться на один, два, три из столбца подробностей из json. Опция down означает, что мой идентификатор div должен измениться на title1, title2 title3, который идет из столбца title из json. Здесь все работает нормально, но я создаю новые div для каждого условия, можно ли сделать один div с несколькими условиями . Вот код ниже.

HTML 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-if="id=='city'">
<div ng-repeat="emp in groups" ng-attr-id="{{emp.details}}" >hello</div>
</div>
<div ng-if="id=='state'">
<div ng-repeat="emp in groups" ng-attr-id="{{emp.title}}" >hello</div>
</div>
<div ng-if="id=='country'">
<div ng-repeat="emp in groups" ng-attr-id="{{emp.name}}" >hello</div>
</div>

Сценарий 

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [
    {
      title: 'title1',
      name:'name1',
      details:'one'
    },
    {
      title: 'title2',
       name:'name2',
      details:'two'
    },
    {
      title: 'title3',
       name:'name2',
      details:'three'
    }
    ]
  $scope.update = function() { 
   if($scope.x == 'city'){
   $scope.id='city';
   }
   if($scope.x == 'state'){
    $scope.id='state';
   }
   if($scope.x == 'country'){
   $scope.id='country';
   }

}
});

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Чтобы достичь желаемого результата, попробуйте:

  1. создайте attr для каждого значения - города, штата и страны, например: 

       if($scope.x == 'city'){  
      $scope.id='city';  
      $scope.attr = 'details';  
   }

  2. Используйте {{emp[attr]}} для отображения значений на основе выпадающего списка: 

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.groups = [{
      title: 'title1',
      name: 'name1',
      details: 'one'
    },
    {
      title: 'title2',
      name: 'name2',
      details: 'two'
    },
    {
      title: 'title3',
      name: 'name2',
      details: 'three'
    }
  ]
  $scope.update = function() {
    if ($scope.x == 'city') {
      $scope.id = 'city';
      $scope.attr = 'details';
    }
    if ($scope.x == 'state') {
      $scope.id = 'state';
      $scope.attr = 'title';
    }
    if ($scope.x == 'country') {
      $scope.id = 'country';
      $scope.attr = 'name';
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <select class="change" ng-model="x" ng-change="update()">
      <option value="city">Cities</option>
      <option value="state">States</option>
      <option value="country">Countries</option>
    </select>
    <div ng-repeat="emp in groups" ng-attr-id="{{emp[attr]}}">{{emp[attr]}}</div>
  </div>
  </div>

codepen - https://codepen.io/nagasai/pen/wRQWRM

0 голосов
/ 11 января 2019

Для этого в единственном элементе вы можете использовать вложенный троичный оператор. Для вашего случая это будет выглядеть так: 

<div ng-repeat="emp in groups" ng-attr-id="{{id=='city' ? emp.details :  id=='state' ? emp.title : emp.name}}" >hello</div>

Я не реализовал это для angular 1, но он работает для angular 2. Встроенная угловая директива (ngif, ngfor ngclass и т. Д.) Работает почти одинаково для обеих версий.

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

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

...