Bind ng-model name and ng-click inside ng-repeat in angularjs

Question

I need to know naming convention for the ng-model and ng-click inside the ng-repeat. And also need to know how to use each model name and ng-click function in the controller. I have given a sample code to show you what I exactly need know.

<input name="" type="button" ng-click="incrementRoomCount()">
<div ng-repeat="student in studentList">
 <div>Room <span>{{student.studentCount}}</span></div>
 <div>
     <input name="" type="button" ng-click="removeStudent()">
     <input name="adult" type="text" ng-model="noOfStudents">
     <input name="" type="button" class="roomPopupPlusBtn" ng-click="addStudent()">
 </div>
 <div ng-repeat="studentAge in studentList">
    <div ng-show="studentAgeWrapper">
     <select name="age">
      <option ng-repeat="studentAge in ['20','21','22','23','24','25']">{{studentAge}</option>                   
     </select>              
     </div>
    </div>
</div>

Thanks

When repeating you need to add the student identifier which could be an idea. What is the structure of the student object? Example if student.id is the identifier then you can add the following removeStudent(student.id). You need also add the data attribute data="{{student.id}}" on the input tag. — tjhack
– tjhack, Commented Jan 27, 2014 at 15:51

Housty · Accepted Answer · 2014-01-27 16:32:43Z

2

The following fiddle demonstrates how to call functions when repeating over items. You could also just pass in an id to the remove function.

<input value="Remove From Room" type="button" ng-click="removeStudent(student)"/>
        </div>

$scope.removeStudent = function(student) {
angular.forEach($scope.studentList, function(checkStudent, index) {
    if (checkStudent.id === student.id) {
        $scope.studentList.splice(index,1);    
    }
});

};

http://jsfiddle.net/houston88/ab23r/1/

answered Jan 27, 2014 at 16:32

Housty

563 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bind ng-model name and ng-click inside ng-repeat in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related