在 <SELECT> 标签上使用 NG-Model 更改 img src 路径

Question

我是AngularJS的新手，我从昨天开始学习

我的HTML代码：

<select ng-model="myImage">
        <option selected disabled>Make selection</option>
        <option value="earth">Earth</option>
        <option value="moon">Moon</option>
        <option value="sun">Sun</option>            
</select>

{{myImage}}
<img ng-src="{{myImage}}">

我的JavaScript代码：

(function() {
    app = angular.module('app', []);
    app.controller("imgController", function($scope) {          
        function getImageIdOrName(param) {  
            var imageNames = ["earth", "moon", "sun"];
            if (typeof param === "number") {
                return imageNames[param - 1];
            }
            if (typeof param === "string") {
                for (var i = 0; i <= imageNames.length; i++) {
                    if (imageNames[i] == param) {
                        return pad((i+1), 3);
                    }           
                }
            }
        }

        function pad(number, length) {   
            var str = '' + number;
            while (str.length < length) {
                str = '0' + str;
            }   
            return str;
        }

        $scope.myImage = "img/" + getImageIdOrName($scope.myImage) + "png";
   });
}());

我正在尝试显示在 <select> 标签中选择的图像，图像的命名如下：

001.png（地球）
002.png（月亮）
003.png（周日）

我知道我可以解决这个问题，方法是：

<select ng-model="myImage">
        <option selected disabled>Make selection</option>
        <option value="001">Earth</option>
        <option value="002">Moon</option>
        <option value="003">Sun</option>            
</select>

<img ng-src="img/{{myImage}}.png">

但我真正想做的是在 <option> 的值中传递名称而不是图像 ID，然后我想使用我的 getImageIdOrName(param) 函数将名称转换为 ID 并使用<img> 标签的 src 属性的 ID。

我尝试在我的控制器中执行以下操作：$scope.myImage = "img/" + getImageIdOrName($scope.myImage) + "png";

但这似乎不起作用，ng-model 返回的是 <option> 的选定值，而不是 $scope.myImage = "img/" + getImageIdOrName($scope.myImage) + "png";

有人可以告诉我我做错了什么并告诉我解决方案吗？

Answer 1

你只需要

<img ng-src="img/{{getImageIdOrName()}}.png">

您的代码没有多大意义，因为它 $scope.myImage 仅在控制器实例化时初始化一次。每次 selection 更改时，您都需要获取一个新值，最简单的方法是从视图中调用该函数，如上所示。

另一种选择是在 select 上使用 ng-change，以便在每次 selection 发生变化时调用一个函数来更改 myImage 的值。

Answer 2

我会使用 ui-select 这是一个有效的插件：

http://plnkr.co/edit/CsJoacczP3olTCxdgTzh?p=preview

<h3>Selectize theme</h3>
  <p>Selected: {{images.selected}}</p>
  <ui-select ng-model="image.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a image in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="image in images | filter: $select.search">
      <span ng-bind-html="image.name | highlight: $select.search"></span>
      <small ng-bind-html="image.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>

  {{ image }}
  <br/>
  <img ng-src="{{'img/' + image.selected.value + '.png'}}" />

Answer 3

您可以将 ng-change 事件绑定到 select 框并将值传递给控制器中的方法。

(function() {
    app = angular.module('app', []);
    app.controller("imgController", function($scope) {          
        function getImageIdOrName(param) {  
            var imageNames = ["earth", "moon", "sun"];
            if (typeof param === "number") {
                return imageNames[param - 1];
            }
            if (typeof param === "string") {
                for (var i = 0; i <= imageNames.length; i++) {
                    if (imageNames[i] == param) {
                        return pad((i+1), 3);
                    }           
                }
            }
        }

        function pad(number, length) {   
            var str = '' + number;
            while (str.length < length) {
                str = '0' + str;
            }   
            return str;
        }
        //Function to be called whenever the values are changed in the select box
        $scope.updateImage = function(){
         $scope.myImage = "img/" + getImageIdOrName($scope.myImage) + ".png";        
        }

   });
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="imgController">
<select ng-model="myImage" ng-change="updateImage(myImage)">
        <option selected disabled>Make selection</option>
        <option value="earth">Earth</option>
        <option value="moon">Moon</option>
        <option value="sun">Sun</option>            
</select>

{{myImage}}
<img ng-src="{{myImage}}">
</div>

Answer 4

你可以简单地这样做

Demo

<select ng-model="myImage">
        <option selected disabled>Make selection</option>
        <option value="earth">Earth</option>
        <option value="moon">Moon</option>
        <option value="sun">Sun</option>            
</select>

{{myImage}}
<img ng-src="img/{{getImageIdOrName(myImage)}}.png">

在 <SELECT> 标签上使用 NG-Model 更改 img src 路径

Change img src path by using NG-Model on <SELECT> tag

select

angularjs

angularjs-ng-model