angularjs的练习题

angularjstest5.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs练习</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <script src="app1.js"></script>
    <style>
        textarea{
             resize:none;
        }
    </style>
</head>
<body ng-app="myApp" >
    <div ng-controller="myCtrl">


          <h2>我的笔记</h2>
         <textarea cols="30" rows="10" ng-model="message">
          </textarea>
         <div>
             <button ng-click="save()">保存</button>
             <button ng-click="read()">读取</button>
             <button ng-click="delete()">删除</button>
         </div>
        <p>剩余的字数:{{getCount()}}</p>

    </div>

    <script type="text/javascript">

    </script>

</body>
</html>

app1.js

angular.module("myApp", [])
    .controller("myCtrl", ["$scope", function ($scope) {

        //解决初始化message
        $scope.message = '';                //''.length为0


        $scope.getCount = function () {
            //  console.log($scope.message);

            if ($scope.message.length > 100) {

                //  $scope.message = $scope.message.substring(0,100);
                $scope.message = $scope.message.slice(0, 100);
                return 0;
            }
            return 100 - $scope.message.length;



        };

        $scope.save = function () {
            localStorage.setItem("note_a", JSON.stringify($scope.message));
            alert("note_a have save!");
            $scope.message = '';
        };
        $scope.read = function () {

            //if (localStorage.getItem("note_a") != null) {

            //    $scope.message = JSON.parse(localStorage.getItem("note_a"));   //note_a如果是空的，返回null,null.length会报错

                
            //}

            $scope.message = JSON.parse(localStorage.getItem("note_a") || '[]');
        };
        $scope.delete = function () {
            $scope.message = '';
        }
           
    }])

angularjstest6.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjstest6练习</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <script src="app2.js"></script>
</head>
<body ng-app="myApp">
     <div ng-controller="myCtrl">
           <h2>我的备忘录</h2>
         <div>
             <input type="text" ng-model="newTodo" />
             <button ng-click="add()">添加</button>
         </div>
         <div ng-repeat="todo in todos">
             <input type="checkbox" ng-model="todo.isChecked" />
             <span>{{todo.name}}</span>
         </div>
          <button ng-click="deletetTodo()">删除选中的记录</button>

     </div>

</body>
</html>

app2.js

angular.module("myApp", [])
    .controller("myCtrl", ["$scope", function ($scope) {
        $scope.todos = [
            { name: '吃饭', isChecked: false },
            { name: '睡觉', isChecked: true },
            { name: '打豆豆', isChecked: false }

        ];


        //定义添加的方法
        $scope.add = function () {
            var t = { name: $scope.newTodo, isChecked: false };

            //判断用户输入的数据是否合法
            if (!$scope.newTodo) {
                alert("用户输入的数据不能为空");
                return;
            }
            //  $scope.todos.push(t);   //添加到数组的末尾

            $scope.todos.unshift(t);      //添加到数组的最前面
            $scope.newTodo = '';
        };

        //定义删除的方法
        //$scope.deletetTodo = function () {
        //    //留下未选中的
        //    var oldTodos = $scope.todos;
        //    $scope.todos = [];
        //    oldTodos.forEach(function (item, index) {
        //        if (!item.isChecked) {
        //            $scope.todos.push(item);
        //        }
        //    });
               
        //}


        //定义删除的方法第二种方式
        $scope.deletetTodo = function () {
        
            for (var item in $scope.todos) {             //item代表数组的索引
                console.log($scope.todos[item].isChecked);
          
                if ($scope.todos[item].isChecked) {
                   
                    $scope.todos.splice(item, 1);        //删除数组中指定的项
                    $scope.deletetTodo();              //继续遍历一次，因为索引会改变。提倡用上面的方法
                }
            }
        }
           
    }])

猜你喜欢