[英]How can I get two values from an array and include them in a new function all in an angularjs controller
I am new to web development (started with the MEAN stack) and I got stuck with this I suppose obvious answer, but I couldn't find a solution here yet so I thought I give it a shot. 我是Web开发的新手(从MEAN堆栈开始),但我对此很固执,我想答案很明显,但是我在这里找不到解决方案,所以我想尝试一下。
What I would like to do in short is: 总之,我想做的是:
Ideally, I would retrieve the values and add them to the new value like so 理想情况下,我将像这样检索值并将其添加到新值中
index = value[0]*weight[0] + value[1]*weight[1].... and so forth
I have the following code snippet inside my angular controller 我的角度控制器内有以下代码片段
$scope.alerts = [
{ title: 'someTitle1',
weighttitle: 'someweightTitle1',
value: 1,
weight: 30,
options: {
showTicks: true,
hidePointerLabels: true,
hideLimitLabels: true,
stepsArray: [
{ value: 1, legend: 'Very poor' },
{ value: 2, legend: 'Very poor' },
{ value: 3, legend: 'Fair' },
{ value: 4, legend: 'Very poor' },
{ value: 5, legend: 'Average' }
]
}
},
{ title: 'someTitle2',
weighttitle: 'someweightTitle2',
value: 1,
weight: 60,
options: {
showTicks: true,
hidePointerLabels: true,
hideLimitLabels: true,
stepsArray: [
{ value: 1, legend: 'Very poor' },
{ value: 2, legend: 'Very poor' },
{ value: 3, legend: 'Fair' },
{ value: 4, legend: 'Very poor' },
{ value: 5, legend: 'Average' }
]
}
}
];
I thought the solution should somehow look like this 我认为解决方案应该看起来像这样
$scope.index = alert.value*alert.weight
but that did not quite make it. 但这并没有做到。 I am pretty clueless at this point how to retrieve those values. 在这一点上,我非常不了解如何检索这些值。 Maybe I have a misunderstanding of the underlying concept. 也许我对基本概念有误解。
Grateful for any help! 感谢您的帮助!
The solutions did work, but they did not change dynamically. 这些解决方案确实有效,但是并没有动态更改。 The HTML code for this problem looks like this: 此问题的HTML代码如下所示:
<section ng-controller="ArticlesController">
<div class="page-header">
<h1>Neue Evaluierung</h1>
</div>
<div class="col-md-12">
<form name="articleForm" class="form-horizontal" ng-submit="create(articleForm.$valid)" novalidate>
<fieldset>
<div class="row form-group">
<h3>Projekttitel</h3><input type="submit" class="btn btn-default btn-lg btn-success">
</div>
<div ng-show="error" class="text-danger">
<strong ng-bind="error"></strong>
</div>
<input name="title" type="text" ng-model="title" id="title" class="form-control">
<div ng-repeat="alert in alerts">
<h3>{{alert.someTitle}}</h3>
<input type="number" ng-model="alert.value"/>
<div>
<rzslider rz-slider-model="alert.value"
rz-slider-options="alert.options"></rzslider>
</div>
<br>
<br>
<br>
<br>
<div>
<h4>{{alert.someweightTitle}}</h4>
<input type="number" ng-model="alert.weight"/>
<div>
<md-slider flex md-discrete ng-model="alert.weight" step="1" min="1" max="100" aria-label="rating"></md-slider>
</div>
</div>
<input type="number" ng-model="index"/>
<input type="number" ng-model="indexdynamic"/>
</div>
</fieldset>
</form>
</div>
</section>
You can use the reduce function like this: 您可以使用reduce函数,如下所示:
var alerts = [ { title: 'someTitle1', weighttitle: 'someweightTitle1', value: 1, weight: 30, options: { showTicks: true, hidePointerLabels: true, hideLimitLabels: true, stepsArray: [ { value: 1, legend: 'Very poor' }, { value: 2, legend: 'Very poor' }, { value: 3, legend: 'Fair' }, { value: 4, legend: 'Very poor' }, { value: 5, legend: 'Average' } ] } }, { title: 'someTitle2', weighttitle: 'someweightTitle2', value: 1, weight: 60, options: { showTicks: true, hidePointerLabels: true, hideLimitLabels: true, stepsArray: [ { value: 1, legend: 'Very poor' }, { value: 2, legend: 'Very poor' }, { value: 3, legend: 'Fair' }, { value: 4, legend: 'Very poor' }, { value: 5, legend: 'Average' } ] } } ]; var index = alerts.reduce(function(prev, next) { return prev + (next.value*next.weight); }, 0); console.log(index); // 90
Of course you need to store the result in your scope. 当然,您需要将结果存储在您的范围内。 I just ignored the scope for the snippet since its not relevant to the reduce function. 我只是忽略了代码段的范围,因为它与reduce函数无关。
UPDATE: 更新:
The code above show in ng-repeat your alerts
array, with the calculated index
. 上面的代码以ng-repeat alerts
数组的形式显示,其中包含计算出的index
。 It also provide a form that can add an item to alerts
array, and also calculted its index
. 它也提供了可以将项目添加到形式alerts
阵列,并且还calculted其index
。
You can try it on this Fiddle . 您可以在此Fiddle上尝试。
HTML code HTML代码
<section ng-controller="ArticlesController">
<div class="col-md-12">
<div ng-repeat="alert in alerts">
<strong>{{alert.title}}</strong>: {{alert.value}}
<br/>
<strong>{{alert.weighttitle}}</strong>: {{alert.weight}}
<br/>
<strong>Index:</strong> {{alert.index}}<br/><br/>
</div>
<form>
<h1>Add an alert</h1>
Title:<input type="text" ng-model="new.title"/><br/>
Value:<input type="text" ng-model="new.value"/><br/>
Weight title:<input type="text" ng-model="new.weighttitle"/><br/>
Weight:<input type="text" ng-model="new.weight"/><br/>
Index: {{new.value * new.weight}}<br/>
<button type="submit" ng-click="create()">Add this!</button>
</form>
</div>
</section>
AngularJS code AngularJS代码
var myApp = angular.module('myApp', []);
function ArticlesController($scope) {
$scope.new = {};
$scope.alerts = [
{ title: 'someTitle1',
weighttitle: 'someweightTitle1',
value: 1,
weight: 30,
options: {
showTicks: true,
hidePointerLabels: true,
hideLimitLabels: true,
stepsArray: [
{ value: 1, legend: 'Very poor' },
{ value: 2, legend: 'Very poor' },
{ value: 3, legend: 'Fair' },
{ value: 4, legend: 'Very poor' },
{ value: 5, legend: 'Average' }
]
}
},
{ title: 'someTitle2',
weighttitle: 'someweightTitle2',
value: 1,
weight: 60,
options: {
showTicks: true,
hidePointerLabels: true,
hideLimitLabels: true,
stepsArray: [
{ value: 1, legend: 'Very poor' },
{ value: 2, legend: 'Very poor' },
{ value: 3, legend: 'Fair' },
{ value: 4, legend: 'Very poor' },
{ value: 5, legend: 'Average' }
]
}
}
];
for(var i = 0; i < $scope.alerts.length; i++) {
// Add value * weight to index
$scope.alerts[i].index = $scope.alerts[i].value * $scope.alerts[i].weight;
}
$scope.create = function() {
// Calculate index
$scope.new.index = $scope.new.value * $scope.new.weight;
// Add it to the array
$scope.alerts.push(JSON.parse(JSON.stringify($scope.new)));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.