无法从视图中的输入获取数字到Angular中的控制器

时间:2016-12-30 19:09:26

标签: javascript angularjs

将数据发送到控制器时遇到问题。这是我的观点

<form ng-submit="submitMessage()"> 
                <div class="form-group">
                    <input type="number" class="form-control input-sm" name="id_user" ng-model="messageData.id_user" value={{currentUser.id}} >
                </div>

                <div class="form-group">
                    <input type="number" class="form-control input-sm" name="id_thread" ng-model="messageData.id_thread" value={{messages[0].id_thread}}>
                </div>

                <!-- COMMENT TEXT -->
                <div class="form-group">
                    <input type="text" class="form-control input-lg" name="message" ng-model="messageData.text" placeholder="Write your message">
                </div>

                <!-- SUBMIT BUTTON -->
                <div class="form-group text-right">
                    <button type="submit" class="btn btn-primary btn-lg submit-btn">Submit</button>
                </div>
            </form>

这是我的控制器,我将数据发送到:

angular.module('messageCtrl', []).controller('messageController', function($scope, $http, Message, $stateParams) {
// object to hold all the data for the new comment form
$scope.messageData = {};

//get id from route
var id = $stateParams.id;
// get all the comments first and bind it to the $scope.comments object
// use the function we created in our service
// GET ALL COMMENTS ==================================================
Message.get(id).then(successCallback);
function successCallback(data) {
    $scope.messages = data.data;
}

// function to handle submitting the form
// SAVE A COMMENT =====================================================
$scope.submitMessage = function() {
    // save the comment. pass in comment data from the form
    // use the function we created in our service
    console.log($scope.messageData);
    Message.save($scope.messageData).then(successCallback2, errorCallback);
    function successCallback2(getData) {
        $scope.messages = getData.data;
        Message.get(id).then(successCallback);
    }

    function errorCallback(data) {
        console.log(data);
    }

};



});

我在控制器中有一个console.log()来查看正在发送的数据,并且只发送了文本。我试图隐藏前两个输入并在其中有价值。它基本上是向一个线程发送注释,因此它包含用户的id和线程的id。我不希望它们可见,但我需要将它们发送给控制器。当我手动输入数字时,它可以正常工作,但当我在value =“”属性中使用它时,我在控制台中收到此错误:

angular.js:3505 The specified value "{{messages[0]['id_thread']}}" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?
angular.js:3505 The specified value "{{currentUser.id}}" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

我不明白,因为当我打开开发工具并查看值时,它就是一个数字。而当

2 个答案:

答案 0 :(得分:0)

我想您需要摆脱value={{currentUser.id}}value={{messages[0].id_thread}},因为ng-model设置了实际值。您可以使用控制器初始化的初始值设置messageData

答案 1 :(得分:0)

如果在初始化控制器时有currentUser.id值,则可以创建: $scope.messageData = { id_user: currentUser.id };

如果加载currentUser值需要一些时间,则返回messageData对象: $scope.messageData.id_user = currentUser.id;

最后,删除value属性,错误应该消失。您可以对id_thread输入执行相同的操作。