Question

我需要在选项列表中显示图像，我无法使用ng-options所以，我更喜欢使用ng-repeat来显示默认选定项目的图像但是在此我无法从ng-获取所选值更改。 ng-model在这里不起作用，我是否做错了？

代码是这样的：

function MyCntrl($scope) {
$scope.colors = [
{name:'black', value:'st1',
url: 'plain_50.jpg',
},
{name:'white', value:'st2',
    url: 'plain_50.jpg',
},
{name:'red', value:'st3',
    url: 'plain_50.jpg',
}
];
$scope.myColor = $scope.colors[2].value; 

$scope.change = function(val){
console.log(val);
}
}

<div ng-controller="MyCntrl">
<select  ng-model="selectClr" ng-change="change(selectClr.value)" >
<option value="">Select a color</option>                                
<option ng-repeat="color in colors" value="{{color.shade}}" ng-selected="{{color.name == 
myColor}}" style="background:url(http:{{color.url}}) no-repeat 8px 0px;" 
>{{color.name}}   </option></select>

Answer 1

我认为您需要ngOption指令而不是ngRepeat。

请参阅以下文档 https://docs.angularjs.org/api/ng/directive/select

请注意有关使用ngOption而非ngRepeat的评论

Answer 2

您对各种属性感到非常困惑：

JS代码使用值$scope.myColor = $scope.colors[2].value;
但HTML代码会选择当前颜色，如果名称为color.name == myColor
并且选项的值设置为色调（模型中甚至不存在）：value="{{color.shade}}"
选择使用selectClr代替myColor，这是所选颜色的值。

使所有这些一致，代码将正常工作：http://plnkr.co/edit/4BPMosJkyg3CcfCqtjIB?p=preview

<div ng-controller="MyCntrl">
  <select ng-model="myColor" ng-change="change(myColor)" >
    <option value="">Select a color</option>                                
    <option ng-repeat="color in colors" 
            value="{{color.value}}" 
            ng-selected="{{color.value == myColor}}">
      {{color.name}}
    </option>
  </select>
</div>

function MyCntrl($scope) {
  $scope.colors = [
    {
      name:'black', 
      value:'st1'
    },
    {
      name:'white', 
      value:'st2'
    },
    {
      name:'red', 
      value:'st3'
    }
  ];

  $scope.myColor = $scope.colors[2].value; 

  $scope.change = function(val){
    console.log(val);
  }
}

ng-model不能与下拉列表中的ng-repeat一起使用

2 个答案: