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

Question

更新：已解决！请在下面查看我的回答。

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

html:

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>

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

$scope.cars = [
    {url: 'Volvo.png', label: 'Volvo'}, 
    {url: 'Benz.png', label: 'Benz'}, 
    {url: 'JohnDeer.png', label: 'John Deer'}, 
    {url: 'BMW.png', label: 'BMW'}, 
];

Answer 1

我已经想出了如何使用 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)}}">

Answer 2

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 将应用于图像标签。