如何动态设置ng-model

时间:2015-05-30 13:25:06

标签: javascript angularjs

我有以下代码:

<div class="form-group" ng-repeat="(key, day) in {'monday':'Monday','tuesday':'Tuesday','wednesday':'Wednesday','thursday':'Thursday','friday':'Friday','saturday':'Saturday','sunday':'Sunday'}">
    <label for="{{key}}" class="col-sm-3 control-label">{{day | translate}}</label>
    <div class="col-sm-4">
        <input type="number" class="form-control" ng-model="wd.{{key}}" id="{{key}}" name="{{key}}" min="1" placeholder="{{'Enter the price' | translate}}" required />
    </div>
</div>

请注意,我ng-model上有一个input,它正在尝试动态设置模型wd.{{key}}

当我运行此代码时,它表示在.之后存在无效的属性名称。

我怎样才能获得相同的效果?我不喜欢每周的每一天都有HTML代码。

2 个答案:

答案 0 :(得分:3)

使用括号表示法(并且不要忘记它仍然是JavaScript):

ng-model="wd[key]"

答案 1 :(得分:0)

在您的控制器集中

$scope.wd = [   {key: 'monday', day: 'Monday', value: ''},
                {key: 'tuesday', day: 'Tuesday', value: ''},
                ***
            ];

然后在html中

<div class="form-group" ng-repeat="day_item in wd">
    <label for="{{day_item.key}}" class="col-sm-3 control-label">{{day_item.day | translate}}</label>
    <div class="col-sm-4">
        <input type="number" class="form-control" ng-model="day_item.value" id="{{day_item.key}}" name="{{day_item.key}}" min="1" placeholder="{{'Enter the price' | translate}}" required />
    </div>
</div>