【问题标题】:How to set default selected value in Angular Chosen?如何在 Angular Chosen 中设置默认选定值?
【发布时间】:2016-08-05 16:53:09
【问题描述】:

我有一个 select 标记,我正在对其应用角度选择。

这是我的select 标签

<select name="rname" id="rname" ng-model="rname" ng-init="rname='CustomReport'" 
   ng-options="key as value for (key , value) in reportsValuesOptions track by key" chosen>
        <option value="">---Select---</option>
</select>

上面的select标签是从下面的对象中填充的

$scope.reportsValuesOptions = {'Cash Position Report':'Cash Position Report','Detail Report':'Detail Report','Reconciliation Report':'Reconciliation Report','Summary Report':'Summary Report','Sweep Report':'Sweep Report','FCCS/FBPS Detail Report':'FCCS/FBPS Detail Report','CustomReport':'Custom Report Name'};

对象是select 标记的一对值和选项,其中keyoptions tags valuevalueoption tag text

现在我想将select标签的默认值设置为'CustomReport'作为它的option value'Custom Report Name'作为它的option text从上面的对象,使用ng-init

我尝试过ng-init="rname='CustomReport'",但它不起作用

如何从对象的键值对中设置其值?

FULL EXAMPLE

【问题讨论】:

  • 最好从 js 而不是从 html 来做。所以只需初始化 $scope.rname = default-element

标签: javascript angularjs angular-chosen


【解决方案1】:

您的解决方案的问题是因为您提供了一个对象,而 AngularJS 主要是为数组设计的,这导致 AngularJS 无法正确跟踪它们。您可能想为reportsValueOptions 编写一个较短的对象,但它应该是一个对象数组,其形式类似于以下内容:

[
  {label: 'First Label', value:'first-option'},
  {label: 'Second Label', value:'second-option'}
]

这是您的 jsfiddle 的修改版本,其中包含修改的对象,该对象还显示选择了哪一个。

您还可以在此处了解有关对象问题的更多信息:https://docs.angularjs.org/api/ng/directive/ngOptions#complex-models-objects-or-collections-

【讨论】:

    【解决方案2】:

    你可以像这样简单地使用 ng-init

    <select ng-init="somethingHere = options[0]" 
            ng-model="somethingHere" 
            ng-options="option.name for option in options">
    </select>
    

    【讨论】:

    • stackoverflow.com/a/21931119不错的复制粘贴技巧..如果您要复制其他答案,请提供参考。
    • @Vicheanak 我还是没明白。从你所说的我试过这个ng-init="rname = reportsValuesOptions['CustomReport']"但没有奏效。我做错了什么?
    • 如果从ajax 获取options ,这将不起作用
    猜你喜欢
    • 1970-01-01
    • 2018-05-21
    • 2019-05-02
    • 2017-11-10
    • 2019-03-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-25
    • 2016-03-13
    相关资源
    最近更新 更多