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.
我是网络开发的新手(从MEAN堆栈开始)我坚持这个我想的明显的答案,但我还没有找到解决方案,所以我想我试一试。
What I would like to do in short is:
我想简单地做的是:
- Retrieve several Values from an Array
- Include those extracted values into a new scope
- Everything should happen in the controller, since I would like to post all values, including the new one in my database (mongo).
从数组中检索多个值
将这些提取的值包含在新范围中
一切都应该在控制器中发生,因为我想发布所有值,包括我的数据库中的新值(mongo)。
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>
2 个解决方案
#1
0
UPDATE:
The code above show in ng-repeat your alerts
array, with the calculated index
. It also provide a form that can add an item to alerts
array, and also calculted its index
.
上面的代码用ng-repeat你的警报数组显示计算的索引。它还提供了一个表单,可以将项目添加到警报数组,还可以对其索引进行计算。
You can try it on this Fiddle.
你可以试试这个小提琴。
HTML code
<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
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)));
}
}
#2
0
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函数无关。
#1
0
UPDATE:
The code above show in ng-repeat your alerts
array, with the calculated index
. It also provide a form that can add an item to alerts
array, and also calculted its index
.
上面的代码用ng-repeat你的警报数组显示计算的索引。它还提供了一个表单,可以将项目添加到警报数组,还可以对其索引进行计算。
You can try it on this Fiddle.
你可以试试这个小提琴。
HTML code
<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
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)));
}
}
#2
0
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函数无关。