Question

我的HTML和Ng-Repeat：

<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-model将0放入产品名称为product.Name['Monday']的{{1}}的输入中？

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

但它并没有，我也不知道自己做错了什么。

编辑：$scope.HoneyWholeWheat.Monday是因为我使用Laravel进行视图渲染，而Laravel也使用@所以我需要{{}}让Laravel知道让Angular做它的事情。

Answer 1

直接将变量映射到$ 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>

Answer 2

作为Efe答案的补充，ng-model不会评估产品名称，然后继续使用该属性。它将寻找周一及周三的房产。在对象product.name。

中

Angular doc for ngModel提到：

注意：ngModel将尝试通过评估当前范围上的表达式绑定到给定的属性。如果该范围内的属性尚未存在，则将隐式创建该属性并将其添加到范围中。

所以Angular会尝试添加周一＆＃39;属性为产品名称。但由于它是一个字符串（在您的情况下，＆＃34;蜂蜜全麦＆＃34;），ng模型将返回错误＆＃34;无法创建属性＆＃39;星期一＆＃39;在串＆＃34;蜂蜜全麦＆＃34;。

AngularJS Dynamic Ng模型返回范围变量

2 个答案: