Friday 15 January 2010

angularjs - How to insert dynamically a text in an object "angular"? -



angularjs - How to insert dynamically a text in an object "angular"? -

i able select specific object , come in text in 'dynamically' in angular.

app file:

var myapp = angular.module("myapp", []); myapp.controller("myctrl", ["$scope", function($scope){ $scope.persons = [ { name: "kevin", lastname: "cris", mottos : [ { motto: "holy moly!" } ], }, { name: "tres", lastname: "yepo", mottos : [ { motto: "crispy!" } ], }, { name: "prosi", lastname: "nani", mottos : [ { motto: "i love this!" } ], } ]; }]);

i can insert text in object in array[1]:

$scope.addmotto = function(){ $scope.persons[1].mottos.push({ motto: $scope.entermotto }); };

but, how able add together motto person object each time?

to more clear: trying is: select person , add together motto. can't figure out is: how create selection of person object , add together on selected object text.

html file:

<div ng-controller="myctrl"> <section ng-repeat="person in persons"> <p class="header">persons --</p> <p>name: {{person.name}}</p> <p>lastname: {{person.lastname}}</p> <p ng-repeat="shoutout in person.mottos" class="motto">motto: {{shoutout.motto}} </p> </section> <p ng-repet="newmotto in persons.mottos">your motto: {{newmotto.motto}} </p> <p>enter motto:<input type="text" ng-model="entermotto" /></p> <button ng-click="addmotto()">submit </button> </div><!--myctrl-->

live: http://jsfiddle.net/9eau9dq2/

if want add together each of person object, here should - http://jsfiddle.net/k8o8x60w/

$scope.addmotto = function(){ angular.foreach($scope.persons, function(item, i){ item.mottos.push({motto: $scope.entermotto}); }); };

if want add together selected person object, need maintain selected id , update id whenever different person selected , update motto accordingly.

you provide select box allow user select person want add together motto

<select> <option ng-repeat="person in persons" value="{{person.name}}">{{ person.name }} {{ person.lastname }}</option> </select>

and update method to...

$scope.addmotto = function () { angular.foreach($scope.persons, function (item, i) { if (item.name == $scope.selectedperson) { item.mottos.push({ motto: $scope.entermotto }); } }); };

updated fiddle : http://jsfiddle.net/k8o8x60w/1/

note: advice utilize id in person object.

angularjs

No comments:

Post a Comment