![](/img/trans.png)
[英]How can I get the ID from a javascript function to an angularJS controller
[英]How can I get two values from an array and include them in a new function all in an angularjs controller
我是Web開發的新手(從MEAN堆棧開始),但我對此很固執,我想答案很明顯,但是我在這里找不到解決方案,所以我想嘗試一下。
總之,我想做的是:
理想情況下,我將像這樣檢索值並將其添加到新值中
index = value[0]*weight[0] + value[1]*weight[1].... and so forth
我的角度控制器內有以下代碼片段
$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' }
]
}
}
];
我認為解決方案應該看起來像這樣
$scope.index = alert.value*alert.weight
但這並沒有做到。 在這一點上,我非常不了解如何檢索這些值。 也許我對基本概念有誤解。
感謝您的幫助!
這些解決方案確實有效,但是並沒有動態更改。 此問題的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>
您可以使用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
當然,您需要將結果存儲在您的范圍內。 我只是忽略了代碼段的范圍,因為它與reduce函數無關。
更新:
上面的代碼以ng-repeat alerts
數組的形式顯示,其中包含計算出的index
。 它也提供了可以將項目添加到形式alerts
陣列,並且還calculted其index
。
您可以在此Fiddle上嘗試。
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代碼
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.