<script src="https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js"></script>

<div ng-controller="myContrl">    

  <h1>{{lastname}}家族成员：</h1>    

  <ul>        

    <li ng-repeat="x in names track by $index">

      {{x}}.{{lastname}} 

      <button ng-click="delPerson($index)">删除</button> 

    </li>   

  </ul>    

  <p>添加成员：

    <input type="text" ng-model="name" placeholder="请输入需要添加的成员名字"></p>

  <button ng-click="addPerson(name)">确认添加</button>

</div>

angular.module('myapp',[])        

  .controller('myContrl',function($scope,$rootScope){            

  // $rootScope 根作用域，在素有的控制器中都可以用            

  $scope.name = '';            

  $scope.names = ["name1","name2","name3","name4","name4"];            

  $scope.sayHellow = function(){                

    $scope.greeting = "Hello," + $scope.name + "!";               

  }            

​

  $scope.delPerson = function(index){

    // 将点击删除的对象从数组中移除，angular会自动更新列表

    $scope.names.splice(index,1);            

  }            

  $scope.addPerson = function(name){                

    // 输入的对象添加到数组，angular会自动更新列表               

    $scope.names.push(name);            

  }            

​

  $rootScope.lastname = "Refsnes";        

});    

//手动初始化

angular.bootstrap(document,['myapp']);