danielkr danielkr - 4 months ago 15
AngularJS Question

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.

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).



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:

<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>

Answer

You can use the reduce function like this:

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.

Comments