CODEWITHSUNDEEP
javascriptangularjs
Ila
Ila

Reputation: 3538

How can I move these ng-init into the controller?

I am using an ng-repeat to print out many food item inputs. I am currently using ng-init to initialise the values of the inputs, like so:

 <div class="formitem" ng-repeat="food in foodlist" ng-init="food.slider=0; food.unit.selected = food.unit[0];">

However, I want to do some more complicated processing on the initialised values. Namely, I want to check if the food in foodlist already exists in the array editedFood. If it does, then use the values stored in editedFood as the initial values. If not, use 0 as the initial values.

So, I guess that I need to move this processing out of the mark-up and over to the controller, but I don't understand Angular well enough to understand where & how to do this. This ng-repeat sits inside controller FoodCtrl:

myApp.controller('FoodCtrl', function ($scope, $http, $location, $anchorScroll, $filter) { }

Should I do this initialise-processing inside FoodCtrl? How can I initialise the values of food.slider and food.unit.selected for each food in foodlist inside of FoodCtrl?

The Plunkr

UPDATE

I've now tried adding variations on this into FoodCtrl, both into the top level of the controller and into functions, with no luck:

 $scope.foodlist.food.slider = 0;

Error: TypeError: Cannot set property 'slider' of undefined

 $scope.food.slider = 0;

Error: TypeError: Cannot set property 'slider' of undefined

if ($scope.foodlist.food.slider !== undefined) {
  console.log("slider")
  $scope.foodlist.food.slider = 0;
}

Error: TypeError: Cannot set property 'slider' of undefined

$scope.foodlist.forEach(function(food) {
    food.slider = 0;
    food.unit.selected = food.unit[0];
  });

Error: `TypeError: Object # has no method 'forEach'``

I'm feeling pretty stumped.

Upvotes: 4

Views: 449

Answers (3)

Erstad.Stephen
Erstad.Stephen

Reputation: 1035

The ng-init directives will add the properties off of the current scope.

So what you are doing is equivalent to this (inside the controller):

//ng-init="food.slider=0; food.unit.selected = food.unit[0];
$scope.food.slider = 0;
$scope.food.unit.selected = food.unit[0];

Note that these will be set once per the controller initialized.

You may need more complex logic to handle if things are defined or if they should have their default set.

http://docs.angularjs.org/api/ng.directive:ngInit

EDITTED

Misinterpreted what you were try to do... Here is the correct way. 

$scope.foodlist.forEach(function(food){
    food.slider = 0;
    food.unit.selected = food.unit[0];
});

Upvotes: 0

Ila
Ila

Reputation: 3538

I wound up doing it by adding a function, foodInit(food), to the controller: 

$scope.foodInit = function(food) {
 food.slider = 0;
 food.unit.selected = food.unit[0];
 console.log(food)
}

And calling it with ng-init: 

<div class="formitem" ng-repeat="food in foodlist" ng-init="foodInit(food)">

No idea if that is ideal, but it's working.

Upvotes: 0

Zack Argyle
Zack Argyle

Reputation: 8427

In your controller just add something like this.

$scope.foodlist.forEach(function(food) {
    food.slider = 0;
    food.unit.selected = food.unit[0];
});

Upvotes: 0

Related Questions