html:
<input id="demo"/>

在 js 要取值:
document.getElementById("demo").value;
此外 每次要做取值 設值 還要自己設定事件... change, click...來做 model binding, 超麻煩

html:
<input id="demo"/>

在 js 要取值:
$('#demo').val();
此外 每次要做取值 設值 還要自己設定事件... change, click...來做 model binding, 超麻煩

(function () {
    var app = angular.module("app", []);

    app.controller('appController', function ($scope, $filter) {
        var articles = [
            {
                title: "How to build webapps that scale",
                slug: "zp7yqc",
                body: "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium",
                createdAt: "2018-05-11T21:58:27.358Z",
                updatedAt: "2018-05-11T21:58:27.358Z",
                tagList: [],
                description: "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium",
                author: {
                    username: "Eliseo@gardner.biz",
                    bio: "Eliseo",
                    image: "/assets/img/N4VcUeJ.jpg",
                    following: false
                },
                favorited: false,
                favoritesCount: 1
            },
            {
                title: "quo vero reiciendis velit similique earum",
                slug: "p3vcsw",
                body: "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et",
                createdAt: "2018-05-11T21:55:00.722Z",
                updatedAt: "2018-05-11T21:55:00.722Z",
                tagList: [],
                description: "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et",
                author: {
                    username: "Jayne_Kuhic@sydney.com",
                    bio: "Jayne_Kuhic",
                    image: "/assets/img/Qr71crq.jpg",
                    following: false
                },
                favorited: false,
                favoritesCount: 3
            },
            {
                title: "odio adipisci rerum aut animi",
                slug: "3c69lg",
                body: "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione",
                createdAt: "2018-05-11T19:49:35.917Z",
                updatedAt: "2018-05-11T19:49:35.917Z",
                tagList: [],
                description: "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione",
                author: {
                    username: "Lew@alysha.tv",
                    bio: "Lew",
                    image: "/assets/img/cat.jpg",
                    following: false
                },
                favorited: false,
                favoritesCount: 5
            },
            {
                title: "dolore omnis vol odio adipisci rerum aut animi",
                slug: "3c69lg",
                body: "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione",
                createdAt: "2018-05-11T19:49:35.917Z",
                updatedAt: "2018-05-11T19:49:35.917Z",
                tagList: [],
                description: "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione",
                author: {
                    username: "Lew@alysha.tv",
                    bio: "Lew",
                    image: "/assets/img/cat.jpg",
                    following: false
                },
                favorited: false,
                favoritesCount: 5
            }
        ];
        $scope.list = angular.copy(articles);

        $scope.title = 'NTA';
        $scope.subtitle = 'National Treasury Administration, Ministry of Finance';
        $scope.showTitle = true;

        $scope.search = function () {
            $scope.list = $filter('filter')(articles, $scope.keyword.title);
        }

    });
})();

app.filter('itemFilter', function() {
    return function(input) {
        switch(input) {
        case "01":
            return "01-公保";
            break;
        case "02":
            return "02-勞保";
            break;
        case "03":
            return "03-勞工退休金";
            break;
        case "04":
            return "04-健保";
            break;
        case "05":
            return "05-退撫基金";
            break;
        default:
            return "全部";
        }
    };
});

$scope.query = function(ped, omitAlerts) {
            ped = ped || ($scope.model ? $scope.model.ped : "");
            // var result = eac108eService.find({ped:ped},omitAlerts||false);
            var result = eac108eService.findAll('rest/find/all', {
                ped: ped
            }, omitAlerts || false);
            result.then(function(response) {
                if (response) {
                    state.query();
                }

                if (angular.isArray(response)) {
                    $scope.gridData = response;
                } else {
                    $scope.gridData = [ response ];
                }
            });
        };
});

(function() {
    var app = angular.module("brt306eApp", [ 'ntaCommonModule']); // 都一定會注入 ntaCommonModule

    app.factory('brt306eService',function(cResource){ //注入 cResource 來使用框架提供的 ajax 方法,

    	// cResource 第一個參數 url pattern, 參數物件
    	// 這裡只有 下面 remove 會用到, 為了對應後端 rest api url

    	/*@RequestMapping(value = "/{payYyymm}/{item}", method = RequestMethod.DELETE)
          public @ResponseBody
          void delete(@PathVariableModel Brt352faId id, Alerter alerter) {*/


        var resource = cResource('rest/:payYyymm/:item', {payYyymm :"@payYyymm", item :"@item"});

        //如果只要用execute, 宣告這樣即可 var resource = cResource('rest', {});


        return {
            remove : function(model){
                return resource.remove(model); // delete
            },
            execute : function (url , param, showAlerts, clearAlerts){
            	// omitAlerts: 忽略這次 ajax 的噴錯或警告, clearAlerts: 是否清除 alert
                var options = {'omitAlerts': !showAlerts, 'clearAlerts': clearAlerts};
                return resource.execute(url , param, options);
            }
        };
    });

    // 注入所需的 物件 $scope, brt306eService, alerter, cValidation
    app.controller('brt306eController', function($scope, brt306eService, alerter, cValidation) {

        $scope.addSpaces = function(input){
            var result = "";
            if(input == '') {
                for(var i = 0; i < 3; i++){
                    result += String.fromCharCode(160);
                }
            }
            return result;
        };

        //初始
        var init = function() {
            $scope.model = {};
            $scope.itemData = []; // or $scope.itemData.length = 0
        };

        init();
        $scope.model.item = '';

        //帶出EndDate
        $scope.findEndDateByEnter = function($event) {
        	// 檢查 是否按下的案件是 enter (13) 並檢查 payYyymm 這欄位是不是有通過檢核
            if($event.keyCode == 13 && $scope.validate($scope.brt306eForm.payYyymm)) {

            	//呼叫 後端 findEndDate rest api
                var result = brt306eService.execute('rest/findEndDate', $scope.model);
                result.then(function(response){//針對回傳做事
                	//沒有錯誤發生時執行以下
                	if(response) {
                        $scope.model.endDate = response.endDate;
                    }
                });
            }
        };

        //查詢 load grid
        $scope.query = function(showAlerts) {
        	//呼叫 後端 findGrid rest api
            var result = brt306eService.execute('rest/findGrid', $scope.model, showAlerts);
            result.then(function(response){//針對回傳做事
            	//沒有錯誤發生時執行以下
            	if(response) {
                    $scope.itemData = response;
                }
            });
        };

        //新增
        $scope.create = function() {
           // 在 js 檢查這三個欄位是否通過, 記得 要檢核的欄位要有 name
           // 如果是針對整個 form 的欄位都要檢查  $scope.validate($scope.brt306eForm)
            if($scope.validate($scope.brt306eForm.item, $scope.brt306eForm.payYyymm, $scope.brt306eForm.endDate)) {

            	//呼叫 後端create rest api
                var result = brt306eService.execute('rest/create', $scope.model, true);
                result.then(function(response){  //針對回傳做事
                	//沒有錯誤發生時執行以下
                    $scope.model.payYyymm = "";
                    $scope.model.endDate = "";
                    $scope.query();
                });
            }
        };

        //刪除
        $scope.remove = function(){
            bootbox.confirm("是否確定刪除", function(result) { //呼叫 bootbox 元件
                if (result){ // 如果按下確定

                	//呼叫 後端 刪除 rest api
                    var result = brt306eService.remove($scope.model);
                    result.then(function(response) { //針對回傳做事
                        init(); //沒有錯誤發生時執行這
                    }, function(response) {
                        alerter.fatal("無資料可刪除! 失敗!"); //有錯誤發生時執行這
                    });
                };
            });
        };

        //做清除
        $scope.reset = function () {
            init(); //呼叫初始
            alerter.clear(); //清除 alerter
            $scope.clearValidationMessages(); //用來清除所有的驗證錯誤
        };

        //gird 欄位定義變數
        $scope.itemGridCols = [ {field:'item', width:'120px', displayName:'付款類別', cellFilter: "itemFilter"},
                                {field:'payYyymm', width:'100px', displayName:'款項年月'},
                                {field:'endDate', width:'100px', displayName:'代繳期限'},
                                {field:'uids', width:'100px', displayName:'異動人'},
                                {field:'mdate', width:'120px', displayName:'異動日期'} ];
        // grid 物件
        $scope.itemGrid = {
                multiSelect : false, //是否可多選
                data : 'itemData',   // 資料來源 陣列變數名稱: 請用字串
                columnDefs : 'itemGridCols', //gird 欄位定義變數名稱: 請用字串
                enableColumnResize: true, //欄位是否可以調整大小
                selectedItems: $scope.selectedItemData, //選取那些資料
                afterSelectionChange : function(rowItem){ // 選取後要做什麼事
                    if (rowItem.selected) {
                        $scope.model = angular.copy(rowItem.entity);
                    }
                }
        };

        // 自訂檢核
        var checkItem = function(value) {
            return (value === '') ? false : true;
        };
        cValidation.register('checkItem', checkItem, '付款類別錯誤!');

        var checkEndDate = function(value, scope) {
            var payYyymm = parseInt(scope.model.payYyymm + '01', 10);
            var endDate = parseInt(scope.model.endDate, 10);
            return (payYyymm > endDate) ? false : true;
        };
        cValidation.register('checkEndDate', checkEndDate, '代繳期限錯誤!!');

    });

    //自訂 filter
    app.filter('itemFilter', function() {
        return function(input) {
            switch(input) {
            case "01":
                return "01-公保";
                break;
            case "02":
                return "02-勞保";
                break;
            case "03":
                return "03-勞工退休金";
                break;
            case "04":
                return "04-健保";
                break;
            case "05":
                return "05-退撫基金";
                break;
            default:
                return "全部";
            }
        };
    });

})();