AngularJS留言板demo--代碼-2-刪除數據

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>AngularJS留言板</title>

</head>

<body ng-app="boardModule" ng-controller="boardController">
    <form action="#" name="testForm" novalidate>
        <input name="test" ng-model="test" type="text" placeholder="請輸入6~10個字符的中文" required ng-minlength="6" ng-maxlength="10" ng-pattern="/^[\u4e00-\u9fa5]+$/">
        <div ng-show="testForm.test.$dirty && testForm.test.$invalid">
            <div ng-if="testForm.test.$error.required">該輸入項不能為空</div>
            <div ng-if="testForm.test.$error.minlength">輸入長度不能小于6</div>
            <div ng-if="testForm.test.$error.maxlength">輸入長度不能大于10</div>
            <div ng-if="testForm.test.$error.pattern">必須輸入漢字</div>
        </div>
        <button ng-disabled="testForm.$invalid" type="submit" ng-click="addMsg()">提交</button>
    </form>
    <div>
        <div ng-repeat="m in messages">{{m}}
            <button type="button" ng-click="delMsg(m)">刪除</button>
        </div>
    </div>
    <script src="js/angular.js"></script>
    <script>
        var boardModule = angular.module("boardModule", []);
        boardModule.controller("boardController", ["$scope", function($scope) {
            // 初始化
            $scope.messages = [];
            $scope.test = "";

            // 添加
            $scope.addMsg = function() {

                // 添加數據
                $scope.messages.push($scope.test);

                // 清空輸入框/
                $scope.test = "";

                // 返回false,禁用提交,不刷新頁面
                return false;
            }

            // 刪除
            $scope.delMsg = function(m) {
                // 查找刪除元素的位置
                var index = $scope.messages.indexOf(m);

                // 如果元素存在則刪除
                if (-1 !== index) {
                    $scope.messages.splice(index, 1);
                }
            }
        }]);

    </script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容