Ng-model 不适用于动态添加的 html 控件

Question

我正在尝试使用相同的 ng-model 预先选择选择，但是当我在 $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-options”而不是“ng-repeat”

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];

希望对你有帮助；）