Заполнение данных в форме с использованием углового

Я начинаю начинать с углового (но не с 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); 
    } 
});

После нажатия кнопки Test кнопку Я получаю следующий вывод в моей консоли:

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

К тому времени , поля в форме заполнены (и скрытое поле имеет значение). И после нажатия Update я получаю это в консоли:

TestController.js: 27 ИСПЫТАНИЙ
TestController.js: 28 неопределенные

Если я изменить значение в полях вручную, я получить что-то другое вместо «undefined», но идея состоит в том, что не нужно менять значения. Кроме того, объект не содержит скрытый «id», даже если все поля изменены.

Очевидно, что я новичок в этом, и, очевидно, я делаю это неправильно, но есть ли у кого-нибудь предложение о том, как я могу сделать эту работу?

источник

2016-01-05 BluePrint

Вы не хотите использовать document.getElementById в угловом использовании angular.element ("# иды") вместо – Binvention

понимают также угловые 2 способа связывания данных. Значение, если вы измените значение вашей переменной ng-model в своем коде, оно изменится в вашем html – Binvention

И вы не определили noteupd – Binvention

Ваш 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); 
    } 
});

источник

2016-01-05 23:40:10 Binvention

А теперь я получу его. Спасибо @Binvention – BluePrint

Добро пожаловать в волшебство углового. – Binvention

Если вы используете эту переменную в $ scope, у вас всегда есть ng-контроллер с псевдонимом и Вы можете только доступ к свойствам или методы контроллера только с псевдонимом контроллера ..

, если вы не использовали нг-контроллер = «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>

источник

2016-01-06 00:25:56 Saltuk

Вы можете очень хорошо использовать область $, когда вы использовали контроллер как. Они не конфликтуют. Весь контроллер, как есть, добавляет объект в область, прикрепленную к этому объекту в вашем контроллере. – Binvention

нет, вы не поняли .. если вы определяете функцию с помощью this.Method = function, вы должны использовать псевдоним .. для доступа к нему .. я пытался сказать это .. – Saltuk

И переменные, привязанные к $ scope, доступны в контроллере без использования какого-либо родительского объекта. Контроллер как определяет новый объект в области видимости, в которой находятся все переменные, доступные в контроллере. $ scope присваивает переменные самой области. Это привязывает переменные к псевдониму – Binvention

Заполнение данных в форме с использованием углового

ответ

Смежные вопросы