angularJS基礎使用(一)

時間 2019-11-09

原文原文鏈接

低燒還有想感冒的難受,就很少說什麼了,甚是煩躁javascript

沒有建mvc結構js文件(主要是爲了方便,不用切換文件),不過在script中已經分層編寫js了,只須要將相應的base,controller,service保存到相應創建的js文件,而後在html中引入便可(先引入父級js,再引入子級js,先引入service.js,再引入controllerjs)css

若是不習慣看三元,都有相應的通常邏輯判斷代碼/方法html

$location沒有寫demo,按照代碼那樣從url是能夠獲取到想要的數據的java

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>

    <!--響應式頁面的分頁樣式-->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"><!--爲:<div class="pagination">提供樣式-->

    <!--angular.js-->
    <script type="text/javascript" src="../js/angularjs/angular.min.js"></script>
    <!--分頁-->
    <link rel="stylesheet" href="../js/angularjs/pagination.css">
    <script type="text/javascript" src="../js/angularjs/pagination.js"></script>
    <!--自定義js:base/Controller/service-->

    <script type="text/javascript">
        // base.js
//        var app = angular.module('myApp', []);

        // base_pagination.js
        // 分頁(pagination是angular已經封裝好的組件)
        var app = angular.module('myApp', ['pagination']);

        // customService.js
        app.service('myService', function($http) {

            this.findOne = function() {
                return $http.get("../user/add.do");
            }

            // 分頁查詢
            this.findPage = function(page, rows, searchEntity) {
                return $http.post('../user/findPage.do', searchEntity);
            }

        });

        // baseController.js
        app.controller('baseController', function($scope) {
            $scope.searchEntity = {};
            // 初始化分頁參數集合
            $scope.paginationConf = {
                currentPage: 1, // 當前頁碼
                totalItems: 10, // 總記錄數
                itemsPerPage: 10,   // 每頁顯示數據條數
                prePageOptions: [10, 20, 30, 40, 50],   // 選擇每頁顯示數據條數
                // 更改頁碼時,自動觸發事件
                onChange: function() {
                    $scope.reloadList($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
                }
            }
        });

        // angular過濾器(信任html代碼)與ng-bind-html結合使用
        app.filter('trustHtml', ['$sce', function($sce) {
            return function(data) {
                return $sce.trustAsHtml(data);
            }
        }]);

        // 頁面添加分頁組件
        // <tm-pagination conf="paginationConf"></tm-pagination>

        // customController.js
        app.controller('myController' ,function(myService, $scope, $controller, $location) {
//            alert(1);
            $scope.list = [{id : 1, hobby : '籃球'}, {id : 2, hobby : '游泳'}, {id : 3, hobby : '跑步'}];
            // 加載頁面/分頁查詢
            $scope.reloadList = function(page, rows){
                // page:當前頁碼,rows:本次查詢數據條數,searchEntity:用來封裝查詢條件
                myService.findPage(page, rows, $scope.searchEntity).success(function(response) {
                    $scope.pages = response.pages;
                    $scope.paginationConf.totalItems = response.total;
                });
            }

            // 事件(event)
            $scope.checkedIsSelect = function($event) {
//                alert($event.target.checked);
                $scope.checkedIds = [];
                $event.target.checked ? ($scope.selectAll=true, addIdsAll($scope.checkedIds, $scope.list)): $scope.selectAll=false;// 三元簡化代碼
                /*if($event.target.checked) {
                    $scope.selectAll=true;

                    $scope.checkedIds.push(1);
                    $scope.checkedIds.push(2);
                } else {

                    $scope.selectAll=false;
                }*/
            }
            addIdsAll = function(ids,list) {
                for (var i = 0; i < list.length; i++) {
                    ids.push(list[i].id);
                }
            }

            $scope.checkedIds = [];
            $scope.checkSelect = function($event, id) {
                operateIds($event, $scope.checkedIds, id, $scope.list);
//                $event.target.checked ? addId($scope.checkedIds, id,): delId($scope.checkedIds, id,);// 三元簡化代碼
                /*if ($event.target.checked){
                    addId($scope.checkedIds, id);
                } else{
                    delId($scope.checkedIds, id);
                }*/

            }

            operateIds = function($event, ids, id, list) {
                $event.target.checked ? (ids.push(id),ids.length == list.length ? $scope.selectAll=true: $scope.selectAll=false): (ids.splice(ids.indexOf(id), 1),$scope.selectAll=false);
            }
            // 不使用$scope,則方法只能在js中使用,不能在頁面中調用
            addId = function(ids, id) {
                ids.push(id);
                if(ids.length == 2)
                    $scope.selectAll=true;
            }
            delId = function(ids, id){
                var idx = ids.indexOf(id);
                ids.splice(idx, 1);
                $scope.selectAll=false;
            }

            $scope.isSelect = function(ids, id) {
                return ids.indexOf(id) > -1 ? true: false;// 三元簡化代碼
                /*if(idx > -1){
                    return true;
                } else {
                    return false;
                }*/
            }

            // 過濾
            $scope.html = "<font color='red'><b>你好</b></font>";
            $scope.hello = "你好";
            // 繼承
            $controller('baseController', {$scope:$scope});
            // 獲取url上的屬性值
            $scope.id = $location.search()['id'];
            // 監聽屬性變化
            $scope.$watch('name', function(newVal, oldVal) {
//                alert(newVal);
            });

            $scope.findOne = function() {
                myService.findOne().success(function (response) {
//                    alert('success');
                }).error(function (response) {
//                    alert('error');
                });
            }

        });

    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findOne()">
    <div class="pagination" style="margin-left: 50px"><!--使用bootstrap的樣式-->
        <sapn>angular $watch demo</sapn>
        <div ng-bind="name"></div>
        <input ng-model="name" ng-init="name='旺財'"><br><hr>
        <span>解決插值加載時顯示angular插值表達式</span><br>
        <span ng-bind="hello"></span><br><hr>
        <span>解決信任html代碼,即以html代碼識別,而不是以文本原樣輸出</span><br>
        <span ng-bind-html="html|trustHtml"></span><br><hr>
        <span>checkbox複選框的全選與反選</span>
        已選擇的愛好id:<span>{{checkedIds}}</span>
        <div>
            <span>請選擇您的興趣愛好</span>
            <!--複選框全選與反選-->
            <table>
                <tr>
                    <td>
                        <input type="checkbox" ng-checked="selectAll" ng-click="checkedIsSelect($event)">
                    </td>
                    <td>全選</td>
                </tr>
                <!--angular遍歷list集合-->
                <tr ng-repeat="item in list">
                    <td>
                        <input type="checkbox" ng-checked="isSelect(checkedIds, item.id)" ng-click="checkSelect($event, item.id)">
                    </td>
                    <td ng-bind="item.hobby"></td>
                </tr>
            </table>
        </div>
        <hr>
        <span>angular分頁條</span>
        <!--angular分頁插件-->
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
</body>
</html>

1. AngularJS基本使用
2. Angularjs基礎(三)
3. Angularjs基礎(八)
4. angularjs的基礎
5. AngularJS基礎
6. AngularJS基礎語法
7. AngularJS理論基礎
8. AngularJS基礎知識
9. angularJS基礎總結
10. AngularJS的基本使用
更多相關文章...
• Kotlin 基礎語法 - Kotlin 教程
• Scala 基礎語法 - Scala教程
• Kotlin學習（一）基本語法
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。