表單輸入ng值似乎填滿，但是爲空

Question

我正在構建一個AngularJS應用程序。我用填充了ng值的表單存在問題。

輸入字段被填充，用戶可以看到文本，但是當用戶按下'更改'按鈕時，它變得未定義。有什麼想法嗎？

我的控制器代碼：

// Fictional data it wineById will be a JSON object. 
$scope.wineById = {"id":"4","name":"fdfvs1","percentage":"vcxz1"} 

$scope.edit = function() { 
    var wine = { 
     id:$scope.wineById.id, 
     name:$scope.name, 
     percentage:$scope.percentage 
    }; 

    console.log($scope.name, $scope.percentage); 
}; 

HTML：

<form novalidate ng-submit="edit()"> 
     <label>ID wine: <input type="text" ng-value="wineById.id" ng-model="id" ng-disabled="true"></label> <br> 
     <label>Name wine: <input type="text" ng-value="wineById.name" ng-model="name"></label> <br> 
     <label>Percentage wine: <input type="text" ng-value="wineById.percentage" ng-model="percentage"></label> <br> 

     <input type="submit" value="Change"> 
</form> 

案例1：

得到了我場現有的輸入。按下按鈕而不改變字段中的輸入數據。一切都變得沒有定義。

案例2（正常工作的那個）：

得到了我場現有的輸入。使用不同的數據更改所有字段並按下按鈕。一切都改變了。

如何修復情況1？

Answer 1

更改HTML如下，如果你仍然想使用ng-value無論出於何種原因：

<form novalidate ng-submit="edit()"> 
    <label>ID wine: 
    <input type="text" ng-init="id=wineById.id" ng-model="id" ng-value="wineById.id" ng-disabled="true"> 
    </label> 
    <br> 
    <label>Name wine: 
    <input ng-init="name=wineById.name" type="text" ng-value="wineById.name" ng-model="name"> 
    </label> 
    <br> 
    <label>Percentage wine: 
    <input ng-init="percentage=wineById.percentage" type="text" ng-value="wineById.percentage" ng-model="percentage"> 
    </label> 
    <br> 
    <input type="submit" value="Change"> 
</form> 

更好的方法是隻使用ng-model（除非你不想雙向綁定）

<form novalidate ng-submit="edit()"> 
    <label>ID wine: 
     <input type="text" ng-model="wineById.id" ng-disabled="true"> 
    </label> 
    <br> 
    <label>Name wine: 
     <input type="text" ng-model="wineById.name"> 
    </label> 
    <br> 
    <label>Percentage wine: 
     <input type="text" ng-model="wineById.percentage"> 
    </label> 
    <br> 

    <input type="submit" value="Change"> 
</form> 

Live Demo

Answer 2

爲什麼你使用的是ng-value，angular支持雙向綁定，ng-model就足夠用於綁定數據。

<form novalidate ng-submit="edit()"> 
    <label>ID wine: <input type="text" ng-model="id" ng-disabled="true"></label> <br> 
    <label>Name wine: <input type="text" ng-model="name"></label> <br> 
    <label>Percentage wine: <input type="text" ng-model="percentage"></label> <br> 

    <input type="submit" value="Change"> 
</form>