在 <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 并将ID 用于<img>标签的src 属性。

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

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

谁能告诉我我做错了什么并告诉我解决方案？

Answer 1

你可以这样做

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

Answer 2

你只需要

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

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

另一个选项是在选择上使用ng-change，以便调用一个函数，每次选择更改时都会更改myImage 的值。

Answer 3

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

(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

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

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'}}" />