Monday, 15 March 2010

angularjs - How to add object properties from ng-checked items to my ng-model object -



angularjs - How to add object properties from ng-checked items to my ng-model object -

i have 4 input fields i'm using add together properties single object using ng-model= model.propertyname. have series of check boxes i'm creating ng-repeat not figure out how add together unique propertynames each ng-model created ng-repeat. work-around(or maybe correct, i'm not sure) able write function add together checked items array. trying utilize for-loop iterate on array , add together each selected propertyname(string) ng-model object new property using ng-click phone call function.

as-is when click "add technician" button next error output:

typeerror: cannot read property 'selection' of undefined @ scope.$scope.addtechnician (..../scripts/controllers.js:

this occurs because $scope undefined within conditional of loop in addtechnician function. can't understand why because when pass $scope addtechnician function recognizes newtech within loop. when don't pass $scope addtechnician function says newtech undefined next error:

typeerror: cannot set property 'cert1' of undefined @ scope.$scope.addtechnician(.../scripts/controllers)

i'm pretty sure has way ng-repeat creates new scope, prototypically inherits parent scope. again, i'm not sure.

here controller

use strict'; angular.module('carrepair2.controllers', []) .controller('setupctrl', function($scope) { $scope.certifications = [ {'name':'engine repair'}, {'name':'a/t & transaxle'}, {'name':'manual drive train & axles'}, {'name':'suspension & steering'}, {'name':'brakes'}, {'name':'electrical & electronic systems'}, {'name':'heating & air conditioning'}, {'name':'engine performance'}, {'name':'light vehicle diesel engines'} ]; // selected certifications $scope.selection = []; $scope.togglecert = function(name) { var idx = $scope.selection.indexof(name); //is selected if (idx > -1) { $scope.selection.splice(idx, 1); } //is newly selected else{ $scope.selection.push(name); } }; $scope.addtechnician = function($scope) { for(var i=0; < $scope.selection.length - 1; i++){ $scope.newtech['cert' + (i + 1).tostring()] = $scope.selection[i].name; } }; })

here template

<form class="col-md-6"> <div class="input_wrapper"> <input type="text" name="first-name" ng-model="newtech.firstname" required> <label for="first-name">first name</label> </div> <div class="input_wrapper"> <input type="text" name="last-name" ng-model="newtech.lastname" required> <label for="last-name">last name</label> </div> <div class="input_wrapper"> <input type="email" name="email" ng-model="newtech.email" required> <label for="email">email</label> </div> <div class="input_wrapper"> <input type="tel" name="phone" ng-model="newtech.phone" required> <label for="phone">phone</label> </div> <h5>check held ase certifications</h5> <ul class="list"> <li class="item item-checkbox" ng-repeat="certification in certifications"> <label class="checkbox"> <input type="checkbox" value="{{certification.name}}" ng-checked="selection.indexof(certification.name) > -1" ng-click="togglecert(certification)"> </label> {{certification.name}} </li> </ul> <button class="button button-block" ng-click="addtechnician()">add technician</button> </form>

ideally after "add technician" button clicked want end object, newtech ng-model object, has input field info , properties checked items. here jsfiddle simplified code replicating problem

http://jsfiddle.net/aq93z/7/

i solved it. had format loop using angular.foreach(values, function(value, index){here jsfiddle solution http://jsfiddle.net/aq93z/9/. if @ $scope.newtech object created in console checkbox selections added properties of newtech ng-model object.

angularjs angularjs-scope angularjs-ng-repeat

No comments:

Post a Comment