如何将占位符文本添加到由angular创建ng-options
的空白选项中。我希望下拉菜单的空白选项说“请选择尺寸”
警告:*注意:这是一个额外的怪异原因,因为我不是将其作为数组,所以我将size集合拆分为(',')*
HTML:
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" name="colors" ng-model="$parent.myColor" ng-value="key" />
<img ng-click="$parent.myColor = key" ng-src="{{val.swatch_image}}" alt="">{{key}}
<div class="size-pick" ng-show="$parent.myColor==key">
<select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
myColor: {{myColor}}<br/>
mySize: {{mySize}}
</form>
JS:
var app = angular.module("app", []);
app.controller('Ctrl', function ($scope, $filter, $http) {
$scope.productData = {
"colors_and_sizes": {
"data": {
"Black": {
"swatch_image": 'http://lorempixel.com/50/50',
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
},
"Blue": {
"swatch_image": 'http://lorempixel.com/50/50',
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
}
}
}
};
});
请在这里查看http://jsfiddle.net/jg42xsop/有人说我们应该使用ng-init而不是$ parent
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data" ng-init="item = this">
<input type="radio" name="colors" ng-model="item.myColor" ng-value="key" />
<img ng-click="item.myColor = key" ng-src="{{val.swatch_image}}" alt="">
<p>{{key}} </p>
<div class="size-pick" ng-show="item.myColor==key">
<select ng-model="item.mySize" ng-options="size for size in val.sizes.split(',')">
<option value="">Please choose a size</option>
</select>
</div>
<p> myColor: {{myColor}}</p>
<p> mySize: {{mySize}} </p>
<hr/>
</div>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句