Question

我尝试过滤以显示img取决于下拉列表ID，但无法正常工作。我哪里做错了？两个过滤器均不起作用。这是我到目前为止尝试过的

<!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>

Answer 1

此功能是否按预期工作？

   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>

如何为<img/>标签创建过滤器？

1 个答案: