W3School TIY Editor

<!DOCTYPE html>
<html>

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>

// 定义一个控制器 "myCtrl"
app.controller("myCtrl", function($scope) {
    // 初始化一个购物列表数组，包含默认商品
    $scope.products = ["Milk", "Bread", "Cheese"];
    
    // 定义添加商品的函数
    $scope.addItem = function () {
        // 将输入框中的商品添加到购物列表数组中
        $scope.products.push($scope.addMe);
    }    
    
    // 定义移除商品的函数
    $scope.removeItem = function (x) {
        // 根据索引移除购物列表中的商品
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  
  <ul>
    
    <li ng-repeat="x in products">
      {{x}} 
      
      <span ng-click="removeItem($index)">×</span>
    </li>
  </ul>
  
  <input ng-model="addMe">
  
  <button ng-click="addItem()">Add</button>
</div>

<p>点击小“×”以从购物列表中移除项目。</p>

</body>
</html>