Ng-Model 覆盖我在 AngularJS 的输入字段中输入的任何值答案

【问题标题】：Ng-Model Over-writing any Values that I put in the Input field in AngularJSNg-Model 覆盖我在 AngularJS 的输入字段中输入的任何值
【发布时间】：2015-02-12 15:49:48
【问题描述】：

Angular ng-model 正在覆盖我在输入或文本区域值字段中输入的任何值或表达式。如果我删除 ng-model 一切正常，但只要我添加 ng-model 它会使该字段为空。我尝试使用控制器中的一些值填充 ng-model 但它不起作用..

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

虽然表达式值在 Elements Inspector 中正确呈现并且存在，但如果模型存在，视图会显示空白表单，否则它会显示正确的值。

【问题讨论】：

太棒了。你能展示一些复制问题的工作代码吗？
这就是 Angular 的工作原理。表单值使用ng-model 绑定到javascript 控制器，而不是value 属性。您只是想为这些字段设置一个初始值吗？
尝试删除 {{notes}} 和 {{title}} 但保留 ng-models。

标签： javascript angularjs

【解决方案1】：

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 的值是我想在表单字段值中显示的值，因为我正在更新一些内容并且我不希望我的用户从头开始。

【讨论】：

【解决方案2】：

使用 ng-model 时不需要指定 value 属性。只需将值分配给您在 ng-model 中指定的变量，它就会自动填充输入字段。

试试这个：

<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>

【讨论】：

【解决方案3】：

这是一个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();

}

【讨论】：