Question

这可能是一个愚蠢的问题，但现在已经很晚了，我很绝望。我有一个使用ngRoute的angularjs应用程序。但一切都在一个控制器中完成。现在我在一个视图中有一个表单，并且该表单的使用是将它的输入字段数据放入var中以发送邮件。

不要介意控制台日志我试图找到错误。

APP.JS

`

    $scope.addDevice = function(){
        $scope.device = {};

        var data = {

            'Name' : $scope.device.ChildName,
            'Serial' : $scope.device.Serial

        };

        console.log($scope.device.Serial);
        console.log($scope.device.ChildName);
        console.log(data);

        $http.post('http://141.135.5.117:3500/device/register', data, { headers: headers })
        .then(function(response){
            console.log(response);
            console.log(headers);




        });


    }`

Settings.html（注意：这是ng-view中的视图）

<form role="form" class='userForm'>
            <label for="addDevice">Add Device</label>
            <input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="$scope.device.Serial">
            <input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="$scope.device.ChildName">
            <button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
            <p>{{$scope.device.Serial}}</p>

</form>

这是控制台输出

Console output

所有功能都在一个控制器中完成。

Answer 1

首先从ng-model =“$ scope.device.Serial”中删除$ scope 并定义$ scope.device = {};在$ scope.addDevice = function（）{

之外

$ scope.device = {};

$ scope.addDevice = function（）{ - 你在这里编码 - }

工作代码示例

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope','$http', function($scope,$http) {
     $scope.val = '1';
     $scope.device = {};
     
     $scope.addDevice = function(){        

        var data = {
            'Name' : $scope.device.ChildName,
            'Serial' : $scope.device.Serial
        };

        console.log($scope.device.Serial);
        console.log($scope.device.ChildName);
        console.log(data);
        $http.post('http://141.135.5.117:3500/device/register', data)
        .then(function(response){
            console.log(response);
            console.log(headers);
        });
    }
     
     
     
   }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="inputExample">
<div ng-controller="ExampleController">

<form role="form" class='userForm'>
            <label for="addDevice">Add Device</label>
            <input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="device.Serial">
            <input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="device.ChildName">
            <button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
            <p>{{device.Serial}}</p>
</form>

</div>
</div>

与主要范围通信进行通信的视图范围

1 个答案: