Cannot reset textbox after value entered in Angular

Question

If I click the 'Click Me' button, my text fields are filled in. If I then click 'Add New Item', they are reset to blank. This is what I want to happen.

However, if I enter any text into the text fields before I click any buttons, the text fields do not change to reflect the GlossaryItem object in the scope. However I can see that the GlossaryItem value is the expected value when the 'debugger;' line is hit (so GlossaryItem and the textbox values are no longer the same).

I don't want to use $scope.$apply if it can be avoided (would that fix my issue?).

<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'
        };
    }
}]);

score 2 · Accepted Answer · edited Nov 04 '15 at 05:00

2

So, you use value instead of ng-model. It's the reason why you get this behaviour.

   ng-model="GlossaryItem.Term"

https://jsfiddle.net/qqd7oL71/

edited Nov 04 '15 at 05:00

coolguy

7,866
9
45
71

answered Nov 04 '15 at 04:51

Errorpro

2,253
2
16
17

Thanks. Why does Angular 'detach' when the text box value is changed? Guess I'll ask another question if you don't know – garethb Nov 04 '15 at 04:57
There is two way data binding stuff. And you want not only show data, you want to change it and see the result. The way get it is say to angular that we want two way data binding. – Errorpro Nov 04 '15 at 05:00
`ng-model` has two way databinding where as `ng-bind` has one way ..read more at here http://stackoverflow.com/questions/12419619/whats-the-difference-between-ng-model-and-ng-bind – coolguy Nov 04 '15 at 05:01
I get that, but why does the binding work until I manually change the value? Shouldn't it still bind the value one way? It's like angular loses the connection between the textbox and model as soon as I change it manually. I get that the changed value won't be reflected back to the scope, but why won't the new scope value applied in the controller bind one way any more? It has no problem binding one way when I click between the 2 buttons. – garethb Nov 04 '15 at 05:04
It shows that angular loses binding after you change value of first input. But if you dont binding works well. – Errorpro Nov 04 '15 at 06:22

Cannot reset textbox after value entered in Angular

1 Answers1