Question

更新：解决了！请参阅下面的答案。

我正在尝试使用Angular中的每个选择选项显示不同的图像。当用户点击菜单中的每个选项时，菜单旁边会显示不同的图像。所有这些都是在提交表单之前。基本上试图在这个小提琴中完成所做的事情，但在Angular中：http://jsfiddle.net/treyh/xf2pq/

html：

var addGradient = (function() {
    var $serviceModule = $(".service > .service-module > .service-module-bottom");
    $serviceModule.each(function(index) {
        $this.addClass("g" + ((index % 5)+1));
    });
});

在js文件中，在控制器内部：

Current image: {{myCar.url}}
<br>
<select ng-model="myCar" class="form-control">
    <option value="">Choose a car...</option>
    <option ng-repeat="car in cars" value="{{car}}" data-image = "{{car.url}}">{{car.label}}</option>
</select>

Answer 1

Angular中的选择输入最初有点令人困惑，但这是设置它的一种方法。

angular
    .module('app',[])
    .controller('AppCtrl',AppCtrl);


function AppCtrl() {
    var vm = this;

    vm.car_image = null;
    vm.cars = [
        {
            'url':'audi.jpg',
            'name':'Audi'
        },
        {
            'url':'bmw.jpg',
            'name':'BMW'
        }
    ]
}

<div ng-controller="AppCtrl as ctrl">
  <select ng-model="ctrl.car_image" ng-options="c.url as c.name for c in ctrl.cars" class="form-control"></select>
  <hr>
  <img ng-src="images/{{ctrl.car_image}}" ng-show="ctrl.car_image">
</div>

使用ng-src可以在页面加载时防止最初出现404错误。因此，当您选择所需的选项时，选择输入中的ng-model将应用于图像标记。

Answer 2

我已经想出了如何使用ng-repeat和$ Scope来做到这一点。

在js文件中，在控制器内部：

$scope.cars = ['Volvo', 'Benz', 'Toyota'];

$scope.myCar = "";

var carURL = {
     Volvo: 'volvo.png',
     Benz: 'benz.png',
     Toyota: 'toyota.png'
};

$scope.getCarURL = function(brand) {
     return carURL[brand];
}

并在html中：

<select ng-model="myCar">
    <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>

<img ng-src="{{getCarUrl(myCar)}}">

在提交表单之前，使用每个选项选择角度选择显示图像

2 个答案: