Angular select 在提交表单之前显示带有每个选项的图像

Question

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

我正在尝试使用 Angular 中的每个 select 选项显示不同的图像。当用户单击菜单中的每个选项时，菜单旁边会出现不同的图像。所有这些都是在提交表单之前。基本上是尝试在 fiddle 中执行这里所做的操作，但在 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

Select 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 错误。因此，当您 select 您需要的选项时，来自 select 输入的 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)}}">

Angular select 在提交表单之前显示带有每个选项的图像

Angular select display image with each option before submitting form

javascript

html

angularjs

twitter-bootstrap

html-select