为什么不调用ng-repeat起作用？

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. 我正在玩一些代码，并在按钮上放置了一个事件，我注意到它运行了ng-repeat，即使我从未指示程序这样做。 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. 当我单击添加按钮时，它会将对象添加到members数组中，但是由于我正在使用角度显示它，所以我不明白为什么要在视图中添加它。 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>

Answer 1

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. ng-repeat在模型上具有内部监视，每次您修改模型（即在模型中添加，更新或从模型中删除）时，都会在模型上重复执行该监视，然后再次重复并进行渲染。

As you said, The click event on the button change ng-repeat model and push value in it. 如您所说，按钮上的click事件会更改ng-repeat模型并在其中推入值。 that's why ng-repeat will adding the new value in the view. 这就是ng-repeat将在视图中添加新值的原因。

为什么不调用ng-repeat起作用？

问题描述

1 个解决方案

解决方案1
0 2018-03-18 06:10:24

为什么不调用ng-repeat起作用？

问题描述

1 个解决方案

解决方案1 0 2018-03-18 06:10:24

解决方案1
0 2018-03-18 06:10:24