Как создать фильтр для тега <img>? - PullRequest
Новая
       26

Как создать фильтр для тега <img>?

0 голосов
/ 20 декабря 2018

Я пытаюсь отфильтровать, чтобы показать, что img зависит от выпадающего идентификатора, но это работает не так, как хотелось бы.Где я неправ?Оба фильтра не работают.Вот что я пока пытаюсь 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp" ng-controller="namesCtrl">
    <select class="form-control">
      <option ng-repeat="data in day_month_select_menu" ng-model="data.id"
      value="{{data.id}}">{{data.selectText}}</option>
    </select>
    <img ng-repeat="data in day_month_select_menu |filter : data.id" src="{{data.img}}" 
    alt="Error" />
    <ul>
      <li ng-repeat="data in day_month_select_menu | filter:data.id">
        {{ data.show }}
      </li>
    </ul>
  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
      $scope.day_month_select_menu = [
      {
        id : 1, selectText:"day", show:"Monday", img:"tmp"
      },
      {
        id : 2, selectText:"date", show:"Dec 12th 2018", img:"tmp2"
      }
      ];
    });
  </script>
</body>

1 Ответ

0 голосов
/ 20 декабря 2018

Работает ли это так, как вы хотели? 

   angular.module('myApp', []).controller('namesCtrl', function($scope) {
      $scope.day_month_select_menu = [
      {
        id : 1, selectText:"day", show:"Monday", img:"tmp"
      },
      {
        id : 2, selectText:"date", show:"Dec 12th 2018", img:"tmp2"
      },
      {
        id : 3, selectText:"Test", show:"Dec 13th 2018", img:"tmp3"
      }
      ];
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <div ng-app="myApp" ng-controller="namesCtrl" >
    <select class="form-control" ng-model="selectedMenuOption" >
      <option ng-repeat="menuOption in day_month_select_menu" 
      value="{{menuOption.id}}" >{{menuOption.id}} - {{menuOption.selectText}}</option>
    </select>
    <!--
    <br/>selected:{{selectedMenuOption}}
    <hr/>
    -->
    <ng-container ng-repeat="data in day_month_select_menu"  >
      <span ng-if="data.id == selectedMenuOption">
      <br/>{{data.id}} & {{selectedMenuOption}}: <img src="{{data.img}}" alt="Error" /> 
      <span>
    </ng-container>
    
    <ul>
      <li ng-repeat="data in day_month_select_menu | filter:data.id">
        {{ data.show }}
      </li>
    </ul>
  </div>
...