1

我有一个包含多个 AngularUI 滑块的页面，以及一个使用 ng-bind 显示每个滑块值的跨度。它看起来像这样：

   <div class="formitem" ng-repeat="food in foodlist" >
     <div ui-slider="{range: 'min'}" min="0" max="{{ unit.max }}" ng-model="demoVals.slider" class="food-slider" >
      <div class="begin">1</div>
      <div class="end"> {{ unit.max }} {{ food.uid }}  </div>
    </div>
    <span ng-bind="demoVals.slider"></span>
   </div>

我希望 ng-model 对每种食品都是唯一的，例如demoVals.slider57，其中 57 是 的输出{{ food.uid }}。我可以{{ food.uid }}很好地在模板中打印出来，但是如果我尝试将它添加到 ng-model 或 ng-bind，我就会得到这个：

 ng-model="demoVals.slider[food.uid]"

如何将 food.uid 添加到每个食品的 ng-model 中？

4

2 回答 2

0

您想food.uid为每次迭代向 demoVals 添加一个属性。这就需要在每次迭代时执行 js 代码。这只能在指令中完成（恕我直言）。

所以这是一个工作的笨蛋

这是您应该如何修改 html 的方法（注意repeat-directive... 指令 :)

 <div class="formitem" ng-repeat="food in foodlist" repeat-directive>
 <div ui-slider="{range: 'min'}" min="0" max="{{ unit.max }}" ng-model="demoVals.slider" class="food-slider" >
  <div class="begin">1</div>
  <div class="end"> {{ unit.max }} {{ food.uid }}  </div>
</div>
<span ng-bind="demoVals.slider"></span>

这是将在每次迭代中执行的指令的代码：

var app = angular.module('plunker', [])
             .directive ('repeatDirective',function () {
                                           return {
                                              restrict: 'A',
                                              link: function (scope, element, attr) {
                                                console.log('linking directive ',scope.demoVals)
                                                 if (scope.food){
                                                   // you have a value for food
                                                   // you can add it as an attribute to demoVals
                                                   scope.demoVals['prop'+scope.food.uid] = scope.food.name;
                                                 }}
                                           }
                                          });
于 2013-11-04T11:22:14.103 回答
0

使用单个元素而不是使用数组似乎不是一个好的架构选择。您真的应该尝试切换以将滑块值放入数组中。

但是，您可以使用一些控制器功能来实现您想要的，尽管它相当难看。在您的内部ng-repeat，您可以绑定到一个函数

<div ng-bind="test(food.uid)"></div>

功能是

$scope.test = function test(v) {
        var t = $scope.$eval("demoVals.slider" + v);
        return t;
      };
于 2013-11-04T11:14:14.523 回答