W3School TIY Editor

<!DOCTYPE html>
<html>

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

<link rel="stylesheet" href="https://www.w3school.com.cn/style/w3.css">
<body>

// 定义一个控制器 "myCtrl"
app.controller("myCtrl", function($scope) {
    // 初始化一个购物列表数组，包含默认商品
    $scope.products = ["Milk", "Bread", "Cheese"];
    
    // 定义添加商品的函数
    $scope.addItem = function () {
        // 清空错误提示信息
        $scope.errortext = "";
        // 如果输入框为空，直接返回
        if (!$scope.addMe) {return;}
        // 检查商品是否已经在列表中
        if ($scope.products.indexOf($scope.addMe) == -1) {
            // 如果不在列表中，则添加商品
            $scope.products.push($scope.addMe);
        } else {
            // 如果商品已存在，显示错误提示信息
            $scope.errortext = "The item is already in your shopping list.";
        }
    }

// 定义移除商品的函数
    $scope.removeItem = function (x) {
        // 清空错误提示信息
        $scope.errortext = "";    
        // 根据索引移除商品
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
  
  <header class="w3-container w3-light-grey w3-padding-16">
    <h3>My Shopping List</h3>
  </header>

<ul class="w3-ul">
    
    <li ng-repeat="x in products" class="w3-padding-16">
      {{x}} 
      
      <span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span>
    </li>
  </ul>

<div class="w3-container w3-light-grey w3-padding-16">
    <div class="w3-row w3-margin-top">
      
      <div class="w3-col s10">
        <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
      </div>
      
      <div class="w3-col s2">
        <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
      </div>
    </div>
    
    <p class="w3-text-red">{{errortext}}</p>
  </div>
</div>

</body>
</html>