angularjs - How do I add dynamically created select lists that are unique for each item and respond to their changes in Angular -


i'm new angular , still learning proper way things (and realize isn't it!). presently, have array of objects (in case ingredients). each ingredient has different nutrients, , each nutrient has different array of measurements assigned them (some tsp, oz, etc , others slice, 1 cube, etc) . each of these measurements have multiplier associated them use calculations.

when click on individual ingredient, it's added array of ingredients objects. new list of ingredients populates ingredient list (recipe) have each ingredients measurements in select/option along input accept quantity. need able dynamically quantity entered , measurement of each ingredient can calculate various nutrients of each ingredient calculate recipe whole. i'm saving combined nutritional value in array , not worried saving individual calculation. i'll want save quantity, measurement , ingredient separate array (a recipe).

i can work single items multiple items has been challenge.

this controller. add ingredient called full list of ingredients:

$scope.addingredient = function(ndb,name,nutrients){          var id = $scope.recipe.ingredients.length +1;         //$scope.recipe.ingredients i'm saving individual ingredients          $scope.measure  = nutrients[0].measures;         //each ingredient includes property called measures each         //  nutritional item (ie vitamin a, protein, etc).         //each of these arrays identical single ingredient,          //just grabbed first.           var measurement = nutrients[0].measures;//i changed following code          // because $scope.measurement assigning of selects          //to same thing.         $scope.measurement = nutrients[0].measures;          // worked assign model single ingredients, not          //multiple, i've been throwing bunch of stuff @ wall , have          //kept example         $scope.recipe.ingredients.push({          id: id,          name: name,          ndbno: ndb,          nutrients: nutrients,          measures: measurement         })         //this how im storing each recipes ingredient.         };          $scope.converttonumber = function(){         //this called when on selects ng-change, measuremultiplier used          //to calculate each ingredient according selected measurement.         //measurement.eqv should gets it's value selected option          // presently gets called undefined.          $scope.measuremultiplier = ($scope.measurement.eqv);         };        $scope.qty = 1; //the number of particular ingredient pre-populated 1             $scope.recipe.totalled = []; //this store combined         //nutritional values each recipe.  

this in html:

 <single-ingredient ingredient="recipe.ingredients"       qty="qty" measurement="measurement"       on-change="converttonumber()"       on-remove="removeing(id)"> </single-ingredient> 

i'm not using on-remove right now.

this current directive, i'm sure majority of problem lies. of works , visually it's operating. when fires ng-change it's undefined. also, ingredient[{{item.id -1}}].measures grabs correct information, if remove ingredient, gets screwed up. plus it's mess.

.directive('singleingredient',[ function(){     return {          scope: {             ingredient : '=',             qty : '=qty',             measurement : '=measurement',             'removeing': '&onremove',             'converttonumber': '&onchange'         },         restrict: "ae",         transclude: true,         template: ' <ul><li ng-repeat="item in ingredient" >' +             '<input ng-model="qty" size="4" >{{item.name}}' +             '<select ' +               'ng-options="item.label item in ingredient[{{item.id - 1}}].measures" ' +               'ng-model="measurement" ' +               'ng-change="converttonumber()">' +             '</select>' +             '<span</span>' +             '</li></ul>'     } 

again, ultimately, need quantity when changes , value select/options list when changes along it's associated ingredient (by id or similar). i'm willing leg work if can point me in right direction. thanks!


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -