• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

AngularJS how to bind single array element dynamically

 
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi all,

I am trying to create page for add,delete,update the student elements dynamically. i've make a on json array element as data comportment it's will shown as table in view model.

User can able to delete or update the item from view model .for delete i've done with splice method it's working fine, for update an single element i need to bind with textbox ,select options dynamically

Here my templete and controller code

Controller


Please see attached for output screen thanks for your help
Capture.PNG
[Thumbnail for Capture.PNG]
 
Greenhorn
Posts: 16
jQuery AngularJS Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Dinesh,

You should try avoid using jQuery ( Line no 7 ) for retrieval of values from the DOM, AngularJS does this binding for you. You can achieve this easily by adding ng-model directive to your text box and the dropdown. When the value in the dropdown or the text box is changed, the model value gets automatically updated.



Please note that I've added option attributes to the select box, you should also use the ng-selected directive to select the dropdown when you click on edit.

Thanks
Srikkanth
 
Dinesh Kumar Ramakrishnan
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Srikkanth,
Thanks for your reply.

I changed the select data binding by using ng-options directive here the code





can you please let me know how we can avoid jQuery push() function i am new to angular, I need an individual array element for each student.is it possible with angular?
 
Srikkanth Mohansundaram
Greenhorn
Posts: 16
jQuery AngularJS Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Dinesh,

I'm not sure what you mean when by selecting an individual array element. And this is not jQuery push. It's the standard array push method (Array.prototype.push()). And this code needs to be modified



to something like this



I recommend you to go through the simple Todo application on the AngularJS home page to understand the concepts.

Thanks
Srikkanth
 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Hi check the below code will help to you.

<div ng-app="mod">
<section ng-controller="Ctrl">
<input type="text" ng-model="someArray[0].value" ng-change="logValue(0)" />
<input type="text" ng-model="someArray[1].value" ng-change="logValue(1)"/>
<input type="text" ng-model="someArray[2].value" ng-change="logValue(2)"/>
<input type="text" ng-model="someArray[3].value" ng-change="logValue(3)"/>
</section>
</div>
and the CODE

(function () {
var app = angular.module('mod', []);

app.controller('Ctrl', ['$scope', '$log', function ($scope, $log) {
$scope.someArray = [
{value: "value 0"},
{value: "value 1"},
{value: "value 2"},
{value: "value 3"}
];

$scope.logValue = function (index) {
$log.info($scope.someArray[index]);
}
}]);
})();

Thanks and Regards

Saga Biz Solutions
 
Dinesh Kumar Ramakrishnan
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Yes same as angular home page todo application.but i need to rebind the current data to text box again.now todo application able to add an item only
 
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Dinesh,

Please post the updated code.

-- Srikkanth
 
Dinesh Kumar Ramakrishnan
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorry about that.

Here my code as per your advice i have bind the data into textbox,combo and it will be inserted into array




I am still trying to bind individual element white pressing edit,Please advice
 
Srikkanth Mohansundaram
Greenhorn
Posts: 16
jQuery AngularJS Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Dinesh ,

Please check out the fiddle https://jsfiddle.net/we0s9tc8/2/

I've added a function editStudent on the scope and you can see I'm using the ng-click directive on the HTML. Please consider refactoring your variable names ( arr, ar should be replaced by meaningful names like students and student ).

-- Srikkanth
 
Men call me Jim. Women look past me to this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic