Ng模型覆蓋了我在AngularJS的輸入字段中輸入的任何值

Angular ng模型覆蓋了我放入輸入或textarea值字段中的任何值或表達式。如果我刪除ng模型一切正常，但只要我添加ng模型，它使該字段爲空..我試圖使用控制器的一些值填充ng模型，但它不起作用..Ng模型覆蓋了我在AngularJS的輸入字段中輸入的任何值

<input type="text" ng-model="note.title" value="{{title}}"> 
<textarea ng-model="note.notes">{{notes}}</textarea>

儘管表達式值在元素檢查器中正確呈現並存在，但如果模型存在，視圖將顯示空白表單，否則將顯示正確的值。

來源

2015-02-12 ChanX

很好。你能否展示一些複製問題的工作代碼？ – deostroll 2015-02-12 07:07:10

這是角度如何工作。表單值使用'ng-model'綁定到一個javascript控制器，而不是'value'屬性。你只是想爲這些字段設置一個初始值？ – nickgraef 2015-02-12 07:12:53

嘗試刪除{{notes}}和{{title}}，但保留ng模型。 – 2015-02-12 07:40:07

HTML代碼複製

<form action="update.php" ng-controller="EditController" method="post" id="UpdateForm"> 
    <input type="text" value="{{title}}"> 
    <textarea>{{notes}}</textarea> 
    <input type="submit" value="Submit"> 
</form>

JavaScript代碼

var notesId = $routeParams.notesId; 

$scope.editNotes = function() { 
    $http.post('www/edit.php', notesId) 
     .success(function(data) { 
      $scope.allNotes = data; 
      //here i updated value 
      $scope.notes = $scope.allNotes[0].text_notes; 
      $scope.title = $scope.allNotes[0].notes_title; 
     }); 
}; 

$scope.editNotes();

的的$scope.notes & $scope.title值是我想要的東西在表單字段值顯示，因爲我更新一些東西&我不希望我的用戶從頭開始。

來源

2015-02-12 07:18:23 ChanX

如果它不是答案，請使用這些代碼編輯您的問題。 – 2015-02-12 07:38:06

這是一個sample JSFiddle使用您的代碼作爲基礎和擴展它。希望這可以幫助。您會注意到我添加了「錯誤」處理程序，僅僅是因爲我沒有使用可用的服務。您可以將相同的邏輯複製到「成功」功能，以便表單在您從服務獲得成功響應後得到更新。

基本上，樣本HTML：

<div ng-app> 
    <form action="update.php" ng-controller="EditController" method="post" id="UpdateForm"> 
     <input type="text" ng-model="notes.title" value="{{title}}"> 
     <textarea ng-model="notes.notes">{{notes}}</textarea> 
     <input type="submit" value="Submit"> 
    </form> 
</div>

和JavaScript示例：

function EditController($scope, $http){ 
    var notesId = 5; 

    $scope.editNotes = function() { 
     $http.post('www/edit.php',notesId) 
      .success(function(data){ 
       $scope.allNotes = data; 
       $scope.notes = $scope.allNotes[0].notes_title; 
       $scope.title = $scope.allNotes[0].notes_title; 

      }) 
      .error(function(data){ 
       $scope.notes = {title: "title", notes: "notes"}; 

      }) 

    }; 

    $scope.editNotes(); 

}

來源

2015-02-12 07:34:06 Alberto

你不需要，當您使用NG-模型，以指定value屬性。只需將值指定給您在ng模型中指定的變量，它將自動填充輸入字段。

試試這個：「筆記」

<form action="update.php" ng-controller="EditController" method="post" id="UpdateForm"> 
    <input type="text" data-ng-model="title" /> 
    <textarea data-ng-model="notes"></textarea> 
    <input type="submit" value="Submit"> 
</form>

我在你的代碼注意到您在使用它與但你還沒有指定控制器別名，如果你想以這種方式使用試試這個：

<form action="update.php" ng-controller="EditController as notes" method="post" id="UpdateForm"> 
     <input type="text" data-ng-model="notes.title" /> 
     <textarea data-ng-model="notes.notes"></textarea> 
     <input type="submit" value="Submit"> 
    </form>

來源

2015-02-12 07:47:28

Ng模型覆蓋了我在AngularJS的輸入字段中輸入的任何值

回答

相關問題