AngularJS留言板demo--代碼-1-添加數(shù)據(jù)

<!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}}</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() {

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

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

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

    </script>
</body>

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

推薦閱讀更多精彩內(nèi)容