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

阿琳·哈伍德(Armene Harwood)

问题

如何将占位符文本添加到由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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular + Kendo:下拉列表的默认占位符

来自分类Dev

使用角度在下拉列表中选择的设置选项

来自分类Dev

角度-下拉菜单中不显示选择的默认选项

来自分类Dev

CKEDITOR中的文本占位符(角度上下文)

来自分类Dev

UITextField,在iOS中的文本后设置占位符

来自分类Dev

在下拉选项中设置默认文本

来自分类Dev

是否将VoiceOver设置为忽略UITextField中的占位符文本?

来自分类Dev

在reactjs中设置文本输入占位符颜色

来自分类Dev

从angularjs下拉列表中删除空白选项

来自分类Dev

Woocommerce Checkout:在国家/地区下拉列表中添加占位符

来自分类Dev

如何在Flutter中为下拉标签和下拉列表文本设置不同的颜色?

来自分类Dev

从角度下拉列表中删除选择的选项

来自分类Dev

从angularjs下拉列表中删除空白选项

来自分类Dev

InputText组件中的默认文本(占位符)

来自分类Dev

即使在vb.net中设置为下拉列表,组合框也不显示默认值

来自分类Dev

在选择下拉列表中自动设置默认文本

来自分类Dev

AngularJS在下拉菜单中设置默认选择的选项

来自分类Dev

jQuery,通过文本框值从下拉列表中设置一个选项

来自分类Dev

在AngularJS Dropdownlost中设置默认文本选项

来自分类Dev

表单下拉列表的占位符选择类型?

来自分类Dev

在Excel中创建占位符文本

来自分类Dev

Kendo下拉菜单默认占位符

来自分类Dev

从下拉列表中选择选项后,搜索框占位符文本应更改

来自分类Dev

通过文本设置所选选项并重置为默认选项

来自分类Dev

在Ruby中为动态变量创建占位符标签

来自分类Dev

如何在使用 ng-options 创建的 html 下拉列表中设置默认值

来自分类Dev

如何使用自定义外观列表在列表下拉列表中隐藏选择占位符

来自分类Dev

如何将“select”下拉列表中的文本值设置为“input”文本字段?

来自分类Dev

下拉列表中的MVC占位符

Related 相关文章

  1. 1

    Angular + Kendo:下拉列表的默认占位符

  2. 2

    使用角度在下拉列表中选择的设置选项

  3. 3

    角度-下拉菜单中不显示选择的默认选项

  4. 4

    CKEDITOR中的文本占位符(角度上下文)

  5. 5

    UITextField,在iOS中的文本后设置占位符

  6. 6

    在下拉选项中设置默认文本

  7. 7

    是否将VoiceOver设置为忽略UITextField中的占位符文本?

  8. 8

    在reactjs中设置文本输入占位符颜色

  9. 9

    从angularjs下拉列表中删除空白选项

  10. 10

    Woocommerce Checkout:在国家/地区下拉列表中添加占位符

  11. 11

    如何在Flutter中为下拉标签和下拉列表文本设置不同的颜色?

  12. 12

    从角度下拉列表中删除选择的选项

  13. 13

    从angularjs下拉列表中删除空白选项

  14. 14

    InputText组件中的默认文本(占位符)

  15. 15

    即使在vb.net中设置为下拉列表,组合框也不显示默认值

  16. 16

    在选择下拉列表中自动设置默认文本

  17. 17

    AngularJS在下拉菜单中设置默认选择的选项

  18. 18

    jQuery,通过文本框值从下拉列表中设置一个选项

  19. 19

    在AngularJS Dropdownlost中设置默认文本选项

  20. 20

    表单下拉列表的占位符选择类型?

  21. 21

    在Excel中创建占位符文本

  22. 22

    Kendo下拉菜单默认占位符

  23. 23

    从下拉列表中选择选项后,搜索框占位符文本应更改

  24. 24

    通过文本设置所选选项并重置为默认选项

  25. 25

    在Ruby中为动态变量创建占位符标签

  26. 26

    如何在使用 ng-options 创建的 html 下拉列表中设置默认值

  27. 27

    如何使用自定义外观列表在列表下拉列表中隐藏选择占位符

  28. 28

    如何将“select”下拉列表中的文本值设置为“input”文本字段?

  29. 29

    下拉列表中的MVC占位符

热门标签

归档