为在角度下拉列表中创建的默认空白选项设置占位符文本

Setting placeholder text for the default blank option created in an angular dropdowns?

本文关键字：空白 默认 选项 设置 文本 占位符 创建 下拉列表      更新时间：2023-09-26

问题

如何将占位符文本添加到由角度ng-options创建的空白选项。我希望下拉菜单的空白选项显示"请选择尺寸">

警告：* 注意：这是一个额外的奇怪，因为我有大小集合被拆分('，'(，因为它不是一个数组*

实时代码小提琴

.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>
相关文章：