Javascript 使用角函数在表单中填充数据_Javascript_Jquery_Angularjs_Forms

Javascript 使用角函数在表单中填充数据

javascript jquery angularjs forms

Javascript 使用角函数在表单中填充数据,javascript,jquery,angularjs,forms,Javascript,Jquery,Angularjs,Forms,我是Angular（但不是JS）的真正初学者，从昨天开始，所以如果这个问题听起来很愚蠢，我希望你原谅我。考虑下面的小应用： HTML: <!doctype html> <html ng-app="todoApp"> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:

我是Angular（但不是JS）的真正初学者，从昨天开始，所以如果这个问题听起来很愚蠢，我希望你原谅我。考虑下面的小应用：

HTML:

<!doctype html>
<html ng-app="todoApp">
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="/js/TestController.js"></script>
    </head>
    <body ng-controller="TestController as myControl">
        <div id="overlaybox">
            <button ng-click="myControl.showUpd(4)">Test</button><br/><br/><br/>

            <form ng-submit="myControl.updTodo()">
                Note:<br/>
                <textarea rows="5" cols="30" id="updContent" ng-model="noteupd.content"></textarea><br/>
                Deadline (format YYYY-MM-DD HH:MM):<br/>
                <input type="text" id="updDeadline" ng-model="noteupd.deadline" /><br/>
                Completed: 
                <input type="checkbox" id="updCompleted" ng-model="noteupd.completed" /><br/>
                <input type="hidden" id="updID" ng-model="noteupd.id" /><br/>
                <input type="submit" value="Update" />
            </form>
        </div>
    </body>
</html>

angular.module('todoApp', []).controller('TestController', function($scope, $http) {
    var thisApp = this;

    thisApp.showUpd = function(noteID) {
        $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
            .then (function(response) {
                console.log(response.data.content);
                console.log(response.data.deadline);
                console.log(response.data.id);
                console.log(response.data.completed);

                document.getElementById("updContent").innerHTML = response.data.content;
                document.getElementById("updDeadline").value = response.data.deadline;
                document.getElementById("updID").value = response.data.id;

                if (response.data.completed == 1) {
                    document.getElementById("updCompleted").checked = true;
                } else {
                    document.getElementById("updCompleted").checked = false;
                }
            }, function() {
                alert("Error getting todo note");
            });
    }

    thisApp.updTodo = function(noteupd) {
        console.log("TEST");
        console.log($scope.noteupd);
    }
});

单击测试按钮后，我在控制台中获得以下输出：

TestController.js:7 123123
TestController.js:8 2016-01-05 10:28:42
js:9 4
js:10 0

到那时，表单中的字段已经填写完毕（隐藏字段有一个值）。单击“更新”后，我在控制台中看到：

js:27测试
js:28未定义

如果我手动更改字段中的值，我确实会得到其他内容，而不是“未定义”，但这样做的目的是不必更改值。此外，即使更改了所有字段，对象也不包含隐藏的“id”

显然，我是这方面的初学者，显然我做错了，但是有人对我如何实现这一点有什么建议吗？

您的html很好，但您的代码需要修复

首先在代码中定义noteupd

使用noteupd更改html值，而不是document.getElementById

这应该可以修复你的代码，结果会是这样的

angular.module('todoApp', []).controller('TestController', function($scope, $http) {
    var thisApp = this;
    $scope.noteupd={}; //defining noteupd
    var noteupd=$scope.noteupd;  //preventing scope issues
    thisApp.showUpd = function(noteID) {
        $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
            .then (function(response) {
                console.log(response.data.content);
                console.log(response.data.deadline);
                console.log(response.data.id);
                console.log(response.data.completed);

                //updating your html
                 noteupd.content= response.data.content;
                noteupd.deadline = response.data.deadline;
              noteupd.id= response.data.id;

                if (response.data.completed == 1) {
                    noteupd.completed = true;
                } else {
                    noteupd.completed = false;
                }
            }, function() {
                alert("Error getting todo note");
            });
    }

    thisApp.updTodo = function(noteupd) {
        console.log("TEST");
        console.log($scope.noteupd);
    }
});

如果对$scope.使用此变量。。您始终使用别名ng控制器，并且只能使用控制器别名访问控制器的属性或方法

如果未使用ng controller=“TestController作为myController” 而不是像myController.method（）那样访问方法。。你的例子是行不通的…（第2节）

这里有一些例子来描述它是如何工作的

也可以查看本教程。。


试验






如果对$scope使用绑定，请注意：



截止日期（格式YYYY-MM-DD HH:MM）：



已完成：


如果将绑定与$scope一起使用，请注意：



截止日期（格式YYYY-MM-DD HH:MM）：



已完成：




第二节
试验
试验






如果对$scope使用绑定，请注意：



截止日期（格式YYYY-MM-DD HH:MM）：



已完成：


如果将绑定与$scope一起使用，请注意：



截止日期（格式YYYY-MM-DD HH:MM）：



已完成：

您不想在angular中使用document.getElementById，而是使用angular.element（“#id”）也要意识到angular是双向数据绑定。这意味着，如果您在代码中更改ng模型变量的值，它将在您未定义的htmlAnd中更改noteupd@Binvention尝试将ti更改为

angular.element（“#id”）

，但根本不起作用，现在它无法将数据加载到字段中。还尝试将其包装为jQuery对象：

angular.element（$（“#id”））

，但它也不起作用。还有，我应该在哪里定义NoTuPd？只是为了将来参考，尝试改变价值的方式，你尝试的方式是NG模型不知道你改变了值，所以它用从NoTuPd不被定义的空白对象写入它，现在我得到它。谢谢@binventiony当您将控制器用作时，您仍然可以很好地使用$scope。他们没有冲突。控制器所做的一切就是向附加到控制器作用域的作用域中添加一个对象，该作用域位于您不理解的控制器作用域中。。如果使用此.Method=函数定义函数，则必须使用alias。。要访问它。。我试图告诉大家，..和附加到$scope的变量在控制器中是可用的，而不使用任何类型的父对象。控制器as在作用域上定义一个新对象。作用域是控制器中所有可用变量所在的位置$作用域将变量附加到作用域本身。这将变量附加到别名上，他最初使用的方式很好，因为他的作用域包括他附加到该别名上的所有函数。他正确地使用了别名

angular.module('todoApp', []).controller('TestController', function($scope, $http) {
  var thisApp = this;
  $scope.readedTodo = {};
  this.noteupd = {};

  thisApp.showUpd = function(noteID) {
    // changed your url as defat json data 
    $http({
        method: 'GET',
        url: 'data.json'
      })
      .then(function(response) {
        console.log(response.data);
        console.log(response.data.content);
        console.log(response.data.deadline);
        console.log(response.data.id);
        console.log(response.data.completed);

        thisApp.noteupd = response.data;
        $scope.readedTodo = response.data;




      }, function() {
        alert("Error getting todo note");
      });
  }

  thisApp.updTodo = function(noteupd) {
    console.log("TEST");
    console.log(thisApp.noteupd);
  }
});