返回范围变量的AngularJS动态Ng模型

Summer Developer 发表于 Dev

夏季开发人员

我的HTML和Ng重复：

<div class="row" ng-repeat="product in myData">
<div class="col-sm-3">
@{{product.Name}}
</div>
<div class="col-sm-3">
@{{product.PriceWholesale|currency}}
</div>
<div class="col-sm-3">
<input ng-model="product.Name['Monday']"></input>
</div>
<div class="col-sm-3">
<input ng-model="product.Name['Tuesday']"></input>
</div>
<div class="col-sm-3">
<input ng-model="product.Name['Wednesday']"></input>
</div>
<div class="col-sm-3">
<input ng-model="product.Name['Thursday']"></input>
</div>
<div class="col-sm-3">
<input ng-model="product.Name['Friday']"></input>                   
</div>
<div class="col-sm-3">
<input ng-model="product.Name['Saturday']"></input>
</div>
</div>

我的控制器：

$scope.HoneyWholeWheat =  {
Monday:0,
Tuesday: 0,
Wednesday: 0,
Thursday: 0,
Friday: 0,
Saturday: 0
}

我如何才能将ng模型放入产品名称所在的0输入product.Name['Monday']中Honey Whole Wheat？

换句话说，product.Name模型的该部分应注册为Honey Whole Wheat（我相信它会自动修剪掉使其成为空格的空间HoneyWholeWheat，然后['Monday']应该是Monday使它重新连接到$scope.HoneyWholeWheat.Monday？的字符串。

但事实并非如此，我也不知道我在做什么错。

编辑：这@是因为我使用Laravel进行视图渲染，而Laravel也使用了，{{}}所以我需要@让Laravel知道让Angular做事情。

埃菲·奥莫吉（Efe Omoregie Elijah）

像这样直接将危险的变量映射到$ scope太直接了，所以我建议声明一个内部属性来存储实例

$scope.Data = {};//note the {}

我假设您从某个地方接收到$ scope.myData，因此您要做的就是将其映射到$ scope.Data中。

angular.forEach($scope.myData, function(data) {
    $scope.Data[data.Name.replace(/\s+/g, '')] = {
        Monday: 0,
        Tuesday: 0,
        Wednesday: 0,
        Thursday: 0,
        Friday: 0,
        Saturday: 0
    };
});

上面的代码会将$ scope.myData映射到$ scope.Data，以便您可以访问$ scope.Data.PRODUCTNAME.Monday

您的HTML可能会变成

<div class="row" ng-repeat="product in myData">
  <div class="col-sm-3">
    @{{product.Name}}
  </div>
  <div class="col-sm-3">
    @{{product.PriceWholesale|currency}}
  </div>
  <div class="col-sm-3">
    <input ng-model="Data[product.Name].Monday" />
  </div>
  <div class="col-sm-3">
    <input ng-model="Data[product.Name].Tuesday" />
  </div>
  <div class="col-sm-3">
    <input ng-model="Data[product.Name].Wednesday" />
  </div>
  <div class="col-sm-3">
    <input ng-model="Data[product.Name].Thursday" />
  </div>
  <div class="col-sm-3">
    <input ng-model="Data[product.Name].Friday" />
  </div>
  <div class="col-sm-3">
    <input ng-model="Data[product.Name].Saturday" />
  </div>
</div>