如何設置NG-模型動態

Question

我有以下代碼：

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

請注意，我對input這是試圖以動態wd.{{key}}設置模型的ng-model。

當我運行這段代碼時，它說在.之後有一個無效的屬性名稱。

我怎樣才能得到相同的效果？我不喜歡每週的每一天都有HTML代碼。

Answer 1

使用括號標記（不要忘記，它仍然是JavaScript的）：

ng-model="wd[key]" 

Answer 2

在您的控制器設置

$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>