AngularJS - 从输入更新图表数据

Question

我是 angularJS 的新手，我在使用一些计算从输入更新图表数据时遇到了一些问题。我的控制器有一个主 html 文件和一个 app.js 文件。

我正在寻找：

• 让用户输入一个数值
• 进行某种类型的计算（例如输入值*5）
• 然后更新数据数组中的索引

示例：查看下面提供的 sn-ps。我想让用户输入一个数值，进行某种类型的计算，并完全替换 ser.data[4] - 类似于 (userInput*5)。因此，如果用户输入 5，则 ser.data[4] 将为 25，如果他们输入 4，则 ser.data[4] 将为 20，依此类推。

经过一些计算，我能够通过向特定索引添加一个函数来返回一个值——这仅在页面首次加载时才有效。由于我将输入 ng-model 绑定到索引，因此当输入更改时，它只会覆盖该函数并且不再使用它。

很抱歉，如果我解释得不好，请告诉我，我会尽力澄清。

提前感谢您的帮助！

--萌

（在我的 html 文件中输入）

     <div class="row-fluid" ng-repeat="ser in chartSeries" >
          <div class="span12 well">
              <div class="row-fluid">Title <input type="number" ng-model="ser.data[4]" ></div>       
           </div>
      </div>

（我的 app.js 文件中的代码）

'use strict';

 var myapp = angular.module('myapp', ["highcharts-ng"]);
  
myapp.controller('myctrl', function ($scope) {

  $scope.chartSeries = [
    {"name": "Compounded Annually", data: [1, 2, 3, 4, 5]},
	
  
  ];

问题更新

感谢您的帮助！对我来说还是有点模糊。我将尝试通过添加一个模型场景来更好地解释（我理解我最初的问题是否没有意义。）我正在构建一个储蓄计算，但我模拟了其他一些更苗条的东西。

图片中的图表将从 chartSeries 数据中提取数据。假设用户输入 10 作为每日租赁费用，30 作为租赁天数，我会尝试更新“租车”数据以反映 300（或每日租赁费用乘以租赁天数。）所以例如，假设“租车”数据从 app.js 中我的 chartSeries 数据数组的第一个索引中提取数据。

这有帮助吗？感谢你的宝贵时间！

Answer 1

你需要观察输入模型：

$scope.$watch('chartSeries[0].data', function (newVal, oldVal) {
  // You can do a calculation with the new value.
  console.log(newVal[4]); // 5
}, true);

true 表示深度观察。如果chartSeries 数组有多个值，您还可以观看整个系列：$scope.$watch('chartSeries', fn);

我希望你明白这一点。如果此答案方向错误，请更新您的问题，因为我不完全理解您想要做什么。