为什么 ng-repeat 在没有被调用时工作？答案

【问题标题】：Why is the ng-repeat working when it was not called?为什么 ng-repeat 在没有被调用时工作？
【发布时间】：2023-03-10 20:29:01
【问题描述】：

我正在玩一些代码，我在按钮上放置了一个事件，我注意到它运行了 ng-repeat，即使我从未指示程序这样做。当我单击添加按钮时，它会将对象添加到成员数组中，但是由于我使用角度来显示它，所以我不明白为什么将它添加到视图中。添加了按钮上的单击事件并开始发生。我完全不明白，因为这只是一个“错误”。

     <!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>

【问题讨论】：

我相信第一个答案已经回答了你的问题，所以只是一个查询/建议。您是否有理由单独调用 .addMember() 而不是在构造函数中调用？

标签： javascript html angularjs css ecmascript-6

【解决方案1】：

ng-repeat 在模型上有一个内部watch，它会在模型上重复，每次修改模型（即在模型中添加、更新或删除）时，它会再次重复并渲染。

正如您所说，按钮上的单击事件会更改 ng-repeat 模型并在其中推送值。这就是为什么 ng-repeat 会在视图中添加新值。

【讨论】：