Question

我是AngularJS的新手，我从昨天开始学习它。我的HTML代码：＆lt; select ng-model =＆＃34; myImage＆＃34;＆gt; ＆lt;选项已禁用＆gt;进行选择＆lt; / option＆gt; ＆lt; option value =＆＃34; earth＆＃34;＆gt; Earth＆lt; / option＆gt; ＆lt; option value =＆＃34; moon＆＃34;＆gt; Moon＆lt; / option＆gt; ＆lt; option value =＆＃34; sun＆＃34;＆gt; Sun＆lt; / option＆gt; ＆LT; /选择＆GT; {{MYIMAGE}} ＆lt; img ng-src =＆＃34; {{myImage}}＆＃34;＆gt; 我的JavaScript代码：（function（）{ app = angular.module（＆＃39; app＆＃39;，[]）; app.controller（＆＃34; imgController＆＃34;，function（$ scope）{ function getImageIdOrName（param）{ var imageNames = [＆＃34; earth＆＃34;，＆＃34; moon＆＃34;，＆＃34; sun＆＃34;]; if（typeof param ===＆＃34; number＆＃34;）{ return imageNames [param - 1]; } if（typeof param ===＆＃34; string＆＃34;）{ for（var i = 0; i＆lt; = imageNames.length; i ++）{ if（imageNames [i] == param）{ 返回垫（（i + 1），3）; } } } } 功能垫（数量，长度）{ var str =＆＃39;＆＃39; +数字; while（str.length＆lt; length）{ str =＆＃39; 0＆＃39; + str; } 返回str; } $ scope.myImage =＆＃34; img /＆＃34; + getImageIdOrName（$ scope.myImage）+＆＃34; png＆＃34 ;; }）; }（））; 我试图显示在＆lt; select＆gt;中选择的图像标签，图像命名如下： 001.png（地球） 002.png（月亮） 003.png（太阳）我知道我可以通过这样做解决这个问题：＆lt; select ng-model =＆＃34; myImage＆＃34;＆gt; ＆lt;选项已禁用＆gt;进行选择＆lt; / option＆gt; ＆lt; option value =＆＃34; 001＆＃34;＆gt; Earth＆lt; / option＆gt; ＆lt; option value =＆＃34; 002＆＃34;＆gt; Moon＆lt; / option＆gt; ＆lt; option value =＆＃34; 003＆＃34;＆gt; Sun＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; img ng-src =＆＃34; img / {{myImage}}。png＆＃34;＆gt; 但我真正想做的是传递＆lt; option＆gt;的值的名称。而不是图像ID然后我想使用我的getImageIdOrName（param）函数将名称转换为ID并使用id为＆lt; img＆gt;标记的src属性。我已尝试在我的控制器中执行以下操作：$ scope.myImage =＆＃34; img /＆＃34; + getImageIdOrName（$ scope.myImage）+＆＃34; png＆＃34 ;; 但这似乎不起作用，ng-model返回＆lt; option＆gt;的选定值。而不是做$ scope.myImage =＆＃34; img /＆＃34; + getImageIdOrName（$ scope.myImage）+＆＃34; png＆＃34 ;; 有人可以告诉我我做错了什么并向我展示了解决方案吗？

Answer 1

你需要的只是

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

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

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

Answer 2

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

＆＃13;

(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";        
        }

   });
}());

＆＃13;

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

＆＃13;

Answer 3

你可以这么做

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路径

3 个答案: