Ng-модель не работает с динамически добавленными элементами управления html

Question

Я пытаюсь предварительно выбрать выбор с той же ng-моделью, но когда я добавляю элемент в $ scope.alertConditions.rows, выбор не предварительно выбран на основе ng-model , Любая помощь приветствуется.

HTML:

<div class="alert_center_table_body" ng-repeat="alertCondition in alertConditions.rows track by $index"> 
      <div></div> 
      <div> 
       <select ng-model="alertConditions.run_alert" ng-change="getRunDates(alertConditions.run_alert, $index)"> 
        <option ng-repeat="run_alert in runAlerts" value="{{run_alert.id}}">{{run_alert.value}}</option> 
       </select> 
      </div> 
      <div> 
       <select ng-model="alertConditions.run_date" ng-disabled="alertConditions.run_alert == -1"> 
        <option value="0" ng-if="alertConditions.run_alert == -1">Daily</option> 
        <option ng-repeat="run_date in runDates" value="{{run_date.id}}" ng-if="alertConditions.run_alert != -1">{{run_date.value}}</option> 
       </select> 
      </div> 
      <div> 
       <select ng-model="alertConditions.attribute" ng-options="operator.id as operator.value for operator in operators"><option value=""></option></select> 
      </div> 
      <div> 
       <select ng-model="alertCondition.attribute_member" ng-options="operator.id as operator.value for operator in operators"><option value=""></option></select> 
      </div> 
      <div ng-if="alert_type == 2"> 
       <input type="number" ng-model="alertCondition.count_of_period" /> 
      </div> 
      <div> 
       <select ng-model="alertConditions.measure"> 
        <option ng-repeat="measure in measures" value="{{measure.measure_id}}">{{measure.friendlyname}}</option> 
       </select> 
      </div> 
      <div ng-if="alert_type == 1"> 
       <select ng-model="alertCondition.operator" ng-options="operator.id as operator.value for operator in operators"><option value=""></option></select> 
      </div> 
      <div ng-if="alert_type == 2"> 
       <select ng-model="alertCondition.type" ng-options="type.id as type.value for type in types"><option value=""></option></select> 
      </div> 
      <div> 
       <input type="number" ng-model="alertCondition.value" /> 
      </div> 
      <div> 
       <select ng-model="alertCondition.format" ng-options="format.id as format.value for format in formats"><option value=""></option></select> 
      </div> 
      <div> 
       <button ng-click="updateRow($index);"><span class="glyphicon glyphicon-floppy-open"></span><span class="hidden-xs"> Update</span></button> 
       <button ng-click="removeRow($index);"><span class="glyphicon glyphicon-trash"></span><span class="hidden-xs"> Remove</span></button> 
      </div> 
     </div> 

контроллер:

$scope.alertConditions = { 
     run_alert: 0, 
     run_date: null, 
     measure: 'M0002', 
     attribute: null, 
     rows:[{ 
      attribute_member: null, 
      count_of_period: null, 
      operator: 1, 
      type: 1, 
      value: '', 
      format: 1 
     }] 
    } 
$scope.addRow = function(){
 

$scope.alertConditions.rows.push({ 
     attribute_member: null, 
     count_of_period: null, 
     operator: 1, 
     type: 1, 
     value: '', 
     format: 1 
    }); 
} 
 

Спасибо заранее.

Answer 1

Вы должны использовать этот выбор, если хотите иметь предварительно выбранный элемент. использовать "нг-опций" вместо «нг-повтора»

ng-option Angular

так:

<select ng-model="modelColor" ng-options="color.name for color in listColor"> 
</select> 

И модель должна ссылаться на список объектов:

scope.listColor = [{name:"blue"}, {name:"red"}]; 
//Reference the first item in the list 
// So, the selected item will be, the first element (blue) 
scope.modelColor = scope.listColor[0]; 

Надеюсь вам помочь;)