如何在 ng-repeat 内的 md-select 上设置初始值？答案

【问题标题】：How to set initial value on md-select inside an ng-repeat?如何在 ng-repeat 内的 md-select 上设置初始值？
【发布时间】：2016-06-29 15:11:37
【问题描述】：

如果这个问题已经得到解答，我很抱歉，但是 angular 的 md-select 的行为让我喝了酒。

我有一种情况，我正在创建一个包含一些字段和一个选择元素的对象数组。我想预先选择 select 元素内的值，我得到了奇怪的行为。

这是 HTML（使用 Angular 材质）：

  <md-list>
    <md-list-item ng-repeat="condition in conditions track by $index">
      <div layout="row" flex>
        <div flex="5">
          &nbsp;&nbsp;
        </div>
        <div flex="25">
          <md-input-container>
            <label>From</label>
            <input required type="number" name="from" minvalue=0 maxvalue="100" ng-model="condition.from">
          </md-input-container>
        </div>
        <div flex="5">
          &nbsp;&nbsp;
        </div>
        <div flex="25">
          <md-input-container>
            <label>To</label>
            <input required type="number" name="to" minvalue=0 maxvalue="100" ng-model="condition.to">
          </md-input-container>
        </div>
        <div flex="5">
          &nbsp;&nbsp;
        </div>
        <div flex="25">
          <md-input-container>
            <label>Select Question</label>
            <md-select ng-model="condition.question[$index]" ng-model-options="{trackBy: '$value._id'}" required name="cQuestion">
            <md-option ng-repeat="question in questions | orderBy : '_id'" ng-selected="{{condition.question._id === question._id ? true : false}}" ng-value={{question}}>
              {{question.title}}
            </md-option>
            </md-select>               
          </md-input-container>
        </div>
        <div flex="5">
          &nbsp;&nbsp;
        </div>
      </div>
    </md-list-item>
  </md-list>

这是创建我要测试的值的 js：

$scope.questions = [
  {title: 'Question 1', qtype: 1, _id:1},
  {title: 'Question 2', qtype: 2, _id:2},
  {title: 'Question 3', qtype: 3, _id:3},
  {title: 'Question 4', qtype: 4, _id:4},
  {title: 'Question 5', qtype: 5, _id:5}
];
$scope.conditions = [];
var condition = {};
condition.from = '';
condition.to ='';

condition.question = {title: 'Question 2', qtype: 2, _id:3};
$scope.conditions.push(condition);
 condition.from = '';
condition.to ='';

condition.question = {title: 'Question 5', qtype: 5, _id:5};
$scope.conditions.push(condition);

如果您运行此程序，您会发现两行都选择了值 Question 5。看起来模型变得混乱了。

有什么想法可以解决这个问题吗？

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

您两次使用旧的“条件”-Object。但是你必须在推送后创建一个新的“条件”-Object。

var condition = {};
condition.from = '';
condition.to ='';

condition.question = {title: 'Question 2', qtype: 2, _id:3};
$scope.conditions.push(condition);

condition = {}; // <= this line was added
condition.from = '';
condition.to ='';

condition.question = {title: 'Question 5', qtype: 5, _id:5};
$scope.conditions.push(condition);

【讨论】：