Question

我是Web开发的新手，我在AngularJS中遇到了数组问题。

我有一个ng-repeat序列。在这个序列中有两个滑块，由于ng-repeat而反复重复。

相应的HTML代码段如下所示：

<h1>INDEX = {{index}}</h1>
  <div ng-repeat="alert in alerts">
      <rzslider rz-slider-model="alert.value"
              rz-slider-options="alert.options"></rzslider>
    <br>
    <br>
    <div>
      <h4>{{alert.weighttitle}}</h4>
      <div>
        <md-slider flex md-discrete ng-model="alert.weight" step="1" min="1" max="100" aria-label="rating"></md-slider>
      </div>
    </div>
  </div>

考虑到所有链接和脚本都包含在内并且控制器设置正确。

上面的代码执行以下操作：

它显示angularJS控制器的$ scope.index。
出现两个不同的滑块，它们遍历名为alert的数组。从那里它需要一些价值。

Controller的有趣片段如下所示：

$scope.alerts = [
  { id: 1,
    title: 'title1',
    weighttitle: 'weighttitle1',
    value: 1,
    weight: 10,
    options: {
      showTicks: true,
      hidePointerLabels: true,
      hideLimitLabels: true,
      stepsArray: [
        { value: 1, legend: '<10' },
        { value: 2, legend: '<50' },
        { value: 3, legend: '<250' },
        { value: 4, legend: '<500' },
        { value: 5, legend: '>500' }

      ]
    }
  },
  { id: 2,
    title: 'title2',
    weighttitle: 'weighttitle2',
    value: 5,
    weight: 1,
    options: {
      showTicks: true,
      hidePointerLabels: true,
      hideLimitLabels: true,
      stepsArray: [
        { value: 1, legend: '<2Mio' },
        { value: 2, legend: '<10Mio' },
        { value: 3, legend: '<50Mio' },
        { value: 4, legend: '<100Mio' },
        { value: 5, legend: '>100Mio' }

      ]
    }
  },
  { id: 3,
    title: 'title3',
    weighttitle: 'weighttitle3',
    value: 1,
    weight: 1,
    options: {
      showTicks: true,
      hidePointerLabels: true,
      hideLimitLabels: true,
      stepsArray: [
        { value: 1, legend: '<5%' },
        { value: 2, legend: '<10%' },
        { value: 3, legend: '<15%' },
        { value: 4, legend: '<20%' },
        { value: 5, legend: '>20%' }

      ]
    }
  },
  { id: 4,
    title: 'title4',
    weighttitle: 'weighttitle4',
    value: 3,
    weight: 69,
    options: {
      showTicks: true,
      hidePointerLabels: true,
      hideLimitLabels: true,
      stepsArray: [
        { value: 1, legend: '<5' },
        { value: 2, legend: '<10' },
        { value: 3, legend: '<15' },
        { value: 4, legend: '<20' },
        { value: 5, legend: '>20' }

      ]
    }
  },
];

上面的代码段是控制器的一部分，它正确地包含在HTML中，因此正在运行。

现在我的问题是如何设置$scope.index，以便从数组中获取每个value和每个weight并相应地将值相乘，如value * weight 。 必须注意的是，用户可以通过更改操纵滑块来更改此值，滑块对应于数组中的特定变量

我尝试了这样的$ watch命令：

$scope.$watch('alerts', function(newValue, oldValue){
  $scope.index = oldValue + (newValue.weight * newValue.value);
}, true);

但它没有用。

Answer 1

您可以使用$scope.$watch并监听更改，当发生更改时，您可以更新视图。您也可以尝试使用ng-change="update(alert)"函数并将值传递给函数。

AngularJS从数组计算两个动态值

1 个答案: