Question

查看我的FIDDLE

如果我点击“Click Me”按钮，我的文本字段就会填写。如果我然后点击“添加新项目”，它们将重置为空白。这就是我想要发生的事情。

但是，如果在单击任何按钮之前在文本字段中输入任何文本，则文本字段不会更改以反映范围中的GlossaryItem对象。但是我可以看到GlossaryItem值是“调试器”时的预期值。命中行（因此GlossaryItem和文本框值不再相同）。

我不想使用$ scope。$ apply如果可以避免（会解决我的问题吗？）。

<div ng-app="editGlossaryApp">
    <div ng-controller="MainCtrl">
        <div>
            <button ng-click="addNewDefinition()">Add New Item</button>
        </div>
        <div>
            <label>Term:</label>
            <div>
                <input value="{{GlossaryItem.Term}}" />
            </div>
        </div>
        <div>
            <label>Definition:</label>
            <div>
                <textarea rows="16" cols="60">{{GlossaryItem.Definition}}</textarea>
            </div>
        </div>
        <div>
            <button ng-click="fill()">Click Me</button>
        </div>
    </div>
</div>

var app = angular.module('editGlossaryApp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.GlossaryItem = {
        Id: 0,
        Term: '',
        Definition: ''
    };

    $scope.addNewDefinition = function () {
        debugger;
        $scope.GlossaryItem = {
            Id: 0,
            Term: '',
            Definition: ''
        };
    };

    $scope.fill = function(){
        $scope.GlossaryItem = {
            Id: 1,
            Term: 'Test',
            Definition: 'Definition Definition Definition Definition Definition Definition'
        };
    }
}]);

Answer 1

因此，您使用值而不是ng-model。这就是你得到这种行为的原因。

   ng-model="GlossaryItem.Term"

https://jsfiddle.net/qqd7oL71/

在Angular中输入值后无法重置文本框

1 个答案: