使用角度填充表单中的数据

时间：2016-01-05 23:13:37

标签： 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://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
  • TestController.js：9 4
  • TestController.js：10 0

到那时，表单中的字段已填入（并且隐藏字段具有值）。点击更新后，我在控制台中得到了这个：

  • TestController.js：27 TEST
  • TestController.js：28 undefined

如果我手动更改字段中的值，我会得到其他内容而不是＆＃34; undefined＆＃34;，但我们的想法是不应该更改值。此外，该对象不包含隐藏的＆＃34; id＆＃34;即使所有字段都已更改。

显然，我是这方面的初学者，显然我做错了，但有人建议我如何才能做到这一点吗？

2 个答案:

答案 0 :(得分：1)

您的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);
    }
});

答案 1 :(得分：0)

如果你对$ scope使用这个变量..你总是带有别名的ng-controller，你只能使用控制器别名访问控制器的属性或方法..

如果您没有使用 ng-controller =“TestController作为myController” 而不是像myController.method（）那样访问方法..你的例子将无法工作......（第2节）

以下是一些描述你如何运作的例子

也查看本教程.. http://plnkr.co/edit/FgBcahr6WKAI2oEgg4cO?p=preview 

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);
  }
});

<!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="script.js"></script>
</head>

<body>
  <div id="overlaybox" ng-controller="TestController as myControl">
    <button ng-click="myControl.showUpd(4)">Test</button>
    <br/>
    <br/>
    <br/>


    <form ng-submit="myControl.updTodo()">
      <h3>if you use binding h this against $scope</h3> Note:
      <br/>
      <textarea rows="5" cols="30" id="updContent" ng-model="myController.noteupd.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline" ng-model="myController.noteupd.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="myController.noteupd.completed" />
      <br/>


      <h3>if you use binding with $scope</h3> Note:

      <br/>
      <textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
      <br/>
      <input type="hidden" id="updID" ng-model="readedTodo.id" />
      <br/>
      <input type="submit" value="Update" />
    </form>
  </div>


  <h3>SEction 2 </h3>
    <div id="overlaybox2" ng-controller="TestController ">
    <button ng-click="showUpd(4)">Test</button>
    <button ng-click="showUpdate(4)">Test</button>
    <br/>
    <br/>
    <br/>


    <form ng-submit="updTodo()">
      <h3>if you use binding h this against $scope</h3> Note:
      <br/>
      <textarea rows="5" cols="30" id="updContent" ng-model="readedTodo.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline" ng-model="readedTodo.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
      <br/>


      <h3>if you use binding with $scope</h3> Note:

      <br/>
      <textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
      <br/> Deadline (format YYYY-MM-DD HH:MM):
      <br/>
      <input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
      <br/> Completed:
      <input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
      <br/>
      <input type="hidden" id="updID" ng-model="readedTodo.id" />
      <br/>
      <input type="submit" value="Update" />
    </form>
  </div>

</body>

</html>
相关问题
最新问题