将文本框值传递给角度的服务

时间:2017-06-01 05:40:13

标签: angularjs

我有两个页面 - 一个是创建数据,当我点击保存按钮时,文本框值将被发送到后端方法。
在另一个页面中我显示那些输入的数据在表中。所以我使用两个控制器方法在这里。
我不知道如何使用angular将文本框值发送到后端。
我使用jquery做了它,但我不知道角度,这就是为什么我在挣扎。

这是我保存文本框详情的第一页:

<div class="row ">
               <label>Name<span id="required">*</span></label>          
               <input type="text" ng-model="item.name" class = "col-lg-5 col-md-5 col-sm-5 col-xs-10"/>
           </div>
           <div class="row ">
               <label class="col-lg-2 col-md-2 col-sm-3 col-xs-12 ">Description</label>
               <textarea ng-model="item.description"></textarea>
           </div>
           <div class="row marTop">
               <span class="pull-right">
                   <button class="btn save btn-primary"  ng-click="addItem(item)"><i class="fa fa-floppy-o"></i>Save</button>
                   <button class="btn cancel btn-default" onclick="window.location.href = '/Admin/RoleList'"><i class="fa fa-ban"></i>Cancel</button>
               </span>
           </div>

脚本:在此方法中,我只需要传递namedescription

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $scope.items = [];
                    $scope.addItem = function (item) {
                        $scope.items.push(item);
                        $scope.item = {};
                    }
                    //$scope.item = aaa;
                    console.log(item)
                    //$scope.values = {
                    //    name: 'newroleName',
                    //    description: 'roledescription'
                    //};
                    $http.post("/Admin/RolesInsert"){
                        alert("success")
                    }

                })
</script>

这是我获取表数据的第二页(保存name应显示在此表中)

<table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl">
                    <thead class="colorBlue">
                        <tr>
                            <th>S.No</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="">
                        <tr ng-repeat="x in roleList | filter:searchText">
                            <td>{{x.Id}}</td>
                            <td>{{x.name}}</td>
                            <td>
                                <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="edit{{x.Id}}"></i>
                                <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-click="update{{x.Id}}"></i>
                                <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="cancel{{x.Id}}"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
第二个表的

脚本

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $scope.values = {

                    };
                    $http.post("/Admin/getRolesList")
                    .then(function (response) {                     
                        $scope.roleList = response.data;
                      });
                })
</script>

2 个答案:

答案 0 :(得分:1)

其中一种方法是:

angular.module("intranet_App", [])
    .controller('myCtrl', function ($scope, $http, myFactory) {
       ...
        function sendDataToBackend() {
            var requestHeaders = {
                "Content-Type": 'application/json'
            }
            var httpRequest = {
                method: 'POST',
                url: 'your url',
                headers: requestHeaders
            };
            httpRequest.data = $scope.items;
            $http(httpRequest).then(function (response) {
                //Handle the response from the server
            })
        }
    }

答案 1 :(得分:1)

终于得到了答案:

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', ["$scope","$http", function ($scope, $http ,myFactory) {
                    $scope.items = [];

                    $scope.addItem = function (item) {
                        $scope.items.push(item);
                        //$scope.oRoles = $scope.item
                        $scope.json = angular.toJson($scope.item);
                        console.log($scope.json)

                    }

                    $scope.myFunc = function (item) {debugger

                        $scope.addItem(item);
                        var requestHeaders = {
                            "Content-Type": 'application/json'
                        }
                        var httpRequest = {
                            method: 'POST',
                            url: '/Admin/RolesInsert',
                            headers: requestHeaders
                        };

                        httpRequest.data = $scope.json;
                        $http(httpRequest).then(function (response) {
                            alert(response)
                            //$window.location.href = '/Admin/RoleList';
                        })
                    }

                }])
</script>