blocks|key|245368|text|按照建议，您需要使用ng-options，不幸的是，我认为您需要引用缺省值的数组元素(除非数组是字符串数组)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|245369|http://jsfiddle.net/FxM3B/3/|offset|length|245370|JavaScript：|245371|function+AppCtrl($scope)+{


++++$scope.operators+=+[
++++++++{value:+'eq',+displayName:+'equals'},
++++++++{value:+'neq',+displayName:+'not+equal'}
+++++]

++++$scope.filterCondition={
++++++++operator:+$scope.operators[0]
++++}
}|code-block|syntax|javascript|245372|HTML：|245373|<body+ng-app+ng-controller="AppCtrl">
<div>Operator+is:+{{filterCondition.operator.value}}</div>
<select+ng-model="filterCondition.operator"+ng-options="operator.displayName+for+operator+in+operators">
</select>
</body>|245374|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

<p>As suggested you need to use ng-options and unfortunately I believe you need to reference the array element for a default (unless the array is an array of strings).</p>

<p><a href="http://jsfiddle.net/FxM3B/3/" rel="nofollow">http://jsfiddle.net/FxM3B/3/</a></p>

<p>The JavaScript:</p>

<pre><code>function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;body ng-app ng-controller="AppCtrl"&gt;
&lt;div&gt;Operator is: {{filterCondition.operator.value}}&lt;/div&gt;
&lt;select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"&gt;
&lt;/select&gt;
&lt;/body&gt;
</code></pre>


blocks|key|29175|text|对于select标记，angular提供了ng-options指令。它为您提供了设置选项和设置默认值的特定框架。下面是使用ng-options的更新后的fiddle，它可以像预期的那样工作：http://jsfiddle.net/FxM3B/4/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|29176|更新的HTML+(代码保持不变)|29177|<body+ng-app+ng-controller="AppCtrl">
<div>Operator+is:+{{filterCondition.operator}}</div>
<select+ng-model="filterCondition.operator"+ng-options="operator.value+as+operator.displayName+for+operator+in+operators">
</select>
</body>|code-block|syntax|javascript|29178|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/FxM3B/4/^0|2N|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>For the select tag, angular provides the ng-options directive. It gives you the specific framework to set up options and set a default. Here is the updated fiddle using ng-options that works as expected: <a href="http://jsfiddle.net/FxM3B/4/" rel="noreferrer">http://jsfiddle.net/FxM3B/4/</a></p>

<p>Updated HTML (code stays the same) </p>

<pre><code>&lt;body ng-app ng-controller="AppCtrl"&gt;
&lt;div&gt;Operator is: {{filterCondition.operator}}&lt;/div&gt;
&lt;select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators"&gt;
&lt;/select&gt;
&lt;/body&gt;
</code></pre>


blocks|key|245500|text|感谢TheSharpieOne指出了ng-selected选项。如果这是作为答案而不是评论发布的，我会让它成为正确的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|245501|下面是一个有效的JSFiddle：http://jsfiddle.net/coverbeck/FxM3B/5/。|245502|我还更新了fiddle以使用title属性，这是我在最初的帖子中遗漏的，因为它不是问题的原因(但这是我想使用ng-repeat而不是ng-options的原因)。|245503|HTML：|245504|<body+ng-app+ng-controller="AppCtrl">
<div>Operator+is:+{{filterCondition.operator}}</div>
<select+ng-model="filterCondition.operator">
+++<option+ng-repeat="operator+in+operators"+title="{{operator.title}}"+ng-selected="{{operator.value+==+filterCondition.operator}}"+value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>|code-block|syntax|javascript|245505|JS：|245506|function+AppCtrl($scope)+{

++++$scope.filterCondition={
++++++++operator:+'eq'
++++}

++++$scope.operators+=+[
++++++++{value:+'eq',+displayName:+'equals',+title:+'The+equals+operator+does+blah,+blah'},
++++++++{value:+'neq',+displayName:+'not+equal',+title:+'The+not+equals+operator+does+yada+yada'}
+++++]
}|245507|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1873485/thesharpieone|1|http://jsfiddle.net/coverbeck/FxM3B/5/^0|2|D|0|0|H|12|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1C|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1E|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

<p>Thanks to <a href="https://stackoverflow.com/users/1873485/thesharpieone">TheSharpieOne</a> for pointing out the ng-selected option. If that had been posted as an answer rather than as a comment, I would have made that the correct answer.</p>

<p>Here's a working JSFiddle: <a href="http://jsfiddle.net/coverbeck/FxM3B/5/" rel="nofollow noreferrer">http://jsfiddle.net/coverbeck/FxM3B/5/</a>.</p>

<p>I also updated the fiddle to use the title attribute, which I had left out in my original post, since it wasn't the cause of the problem (but it is the reason I want to use ng-repeat instead of ng-options).</p>

<p>HTML:</p>

<pre><code>&lt;body ng-app ng-controller="AppCtrl"&gt;
&lt;div&gt;Operator is: {{filterCondition.operator}}&lt;/div&gt;
&lt;select ng-model="filterCondition.operator"&gt;
   &lt;option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}"&gt;{{operator.displayName}}&lt;/option&gt;
&lt;/select&gt;
&lt;/body&gt;
</code></pre>

<p>JS:</p>

<pre><code>function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}
</code></pre>


blocks|key|245557|text|angular将一个空的option元素注入select的事实是，默认情况下绑定到它的模型对象在初始化时带有一个空值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|245558|如果您想选择一个默认选项，那么您可以在控制器中的作用域上设置它|245559|$scope.filterCondition.operator+=+"your+value+here";|code-block|syntax|javascript|245560|如果你想要一个空的选项占位符，这对我是有效的|245561|<select+ng-model="filterCondition.operator"+ng-options="operator.id+as+operator.name+for+operator+in+operators">
++<option+value="">Choose+Operator</option>
</select>|245562|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>The fact that angular is injecting an empty option element to the select is that the model object binded to it by default comes with an empty value in when initialized.</p>

<p>If you want to select a default option then you can probably can set it on the scope in the controller </p>

<pre><code>$scope.filterCondition.operator = "your value here";
</code></pre>

<p>If you want to an empty option placeholder, this works for me</p>

<pre><code>&lt;select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators"&gt;
  &lt;option value=""&gt;Choose Operator&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|29388|text|如果在angular+material中使用md-select和ng-repeat+ing+md-option，则可以将ng-model-options="{trackBy:+'$value.id'}"添加到this+pen中显示的md-select标记ash中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|29389|代码：|29390|​|29391|<md-select+ng-model="user"+style="min-width:+200px;"+ng-model-options="{trackBy:+'$value.id'}">
++<md-select-label>{{+user+?+user.name+:+'Assign+to+user'+}}</md-select-label>
++<md-option+ng-value="user"+ng-repeat="user+in+users">{{user.name}}</md-option>
</md-select>|code-block|syntax|javascript|29392|29393|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/yYYgmj^0|1O|15|2W|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>If you are using md-select and ng-repeat ing md-option from angular material then you can add <code>ng-model-options="{trackBy: '$value.id'}"</code> to the md-select tag ash shown in <a href="http://codepen.io/anon/pen/yYYgmj" rel="nofollow">this pen</a> </p>

<p>Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}"&gt;
  &lt;md-select-label&gt;{{ user ? user.name : 'Assign to user' }}&lt;/md-select-label&gt;
  &lt;md-option ng-value="user" ng-repeat="user in users"&gt;{{user.name}}&lt;/md-option&gt;
&lt;/md-select&gt;</code></pre>
</div>
</div>
</p>


<p>I'm trying to get select-box to start off with a pre-filled option using ng-repeat with AngularJS 1.1.5. Instead the select always starts out with nothing selected. It also has an empty option, which I don't want. I think that there is a side effect of nothing being selected.</p>

<p>I can get this working using ng-options instead of ng-repeat, but I want to use ng-repeat for this case. Although my narrowed down example doesn't show it, I also want to set the title attribute of each option, and there is no way to do that using ng-options, as far as I know.</p>

<p>I don't think this is related to the common AngularJs scope/prototypical inheritance issue. At least I don't see anything obvious when inspecting in Batarang. Plus, when you pick an option in the select with the UI, the model does update correctly.</p>

<p>Here's the HTML:</p>

<pre><code>&lt;body ng-app ng-controller="AppCtrl"&gt;
    &lt;div&gt;
        Operator is: {{filterCondition.operator}}
    &lt;/div&gt;
    &lt;select ng-model="filterCondition.operator"&gt;
       &lt;option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       &gt;
           {{operator.displayName}}
       &lt;/option&gt;
    &lt;/select&gt;
&lt;/body&gt;
</code></pre>

<p>And the JavaScript:</p>

<pre><code>function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}
</code></pre>

<p>JS Fiddle for this : <a href="http://jsfiddle.net/coverbeck/FxM3B/2/">http://jsfiddle.net/coverbeck/FxM3B/2/</a></p>


Initializing select with AngularJS and ng-repeat

我正在尝试让select-box从一个预先填充的选项开始，在AngularJS 1.1.5中使用ng-repeat。取而代之的是，select在开始时总是没有选择任何内容。它还有一个空选项，这是我不想要的。我认为没有选择任何内容会有副作用。我可以使用ng-options而不是ng-repeat来实现这一点，但在这种情况...

问使用AngularJS和ng-repeat初始化select
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用AngularJS和ng-repeat初始化selectEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用AngularJS和ng-repeat初始化select
EN