Why is the ng-repeat working when it was not called?
Question
I was playing around with some code and I placed an event on the button and I noticed that it ran the ng-repeat even though I never instructed the program to do so. when I click the add button, it add the object in the members array but Since i am using angular to display it,I do not understand why it is adding it in the view. The click event on the button was added and it started to happen. I fully do not understand it since it was simply a "mistake".
<!DOCTYPE html>
<html lang="en" ng-app="module">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<style>
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body ng-controller="controller">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
<tr ng-repeat= "ob in members">
<td>{{ob.name}}</td>
<td>{{ob.age}}</td>
<td>{{ob.job}}</td>
</tr>
</table>
<p> There are {{numMembers}} in the company</p>
<input type="text" placeholder="Name">
<input type="text" placeholder="age">
<input type="text" placeholder="Job">
<button type="submit" id= "button" ng-click="numMembers">Add</button>
<script>
"use strict"
var inputs = document.querySelectorAll('input');
var submit = document.getElementById('button');
const members = [];
class Register {
constructor(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
addMember(){
members.push({ name: this.name,
age: this.age,
job: this.job});
}
static membersNum(){
return members.length;
}
}
const memberOne = new Register("georges tchianga","21","web developer");
const memberTwo = new Register("john lenon","41","Math teacher");
const memberThree = new Register("john okorozo","22","Nurse");
const memberFour = new Register("Adam simons","24","Doctor");
const memberFive = new Register("selena roski","28","Singer");
memberOne.addMember();
memberTwo.addMember();
memberThree.addMember();
memberFour.addMember();
memberFive.addMember();
submit.addEventListener("click",function(e) {
e.preventDefault();
var name = inputs[0].value;
var age = inputs[1].value;
var job = inputs[2].value;
const AddingMembers = new Register(name,age,job);
AddingMembers.addMember();
console.log(members);
})
var modul = angular.module("module",[]);
modul.controller("controller",function($scope) {
$scope.members = members;
$scope.numMembers = Register.membersNum();
})
</script>
</body>
</html>
1 answers
solution1
0 2018-03-18 06:10:24
ng-repeat has an internal watch on model which repeating on it, every time you modify the model (ie add, update or delete in/from model), its repeat again and rendered.
As you said, The click event on the button change ng-repeat model and push value in it. that's why ng-repeat will adding the new value in the view.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.