Angular js the problem of two-way data transfer to control the "text field" to change the "label"

Question

I am using a data model with an "edit" field. And, based on the value of "edit", I use a text box or shortcut. I want that after the user clicks “ok” after editing, the text box should change to a shortcut. However, somehow it does not work. The following is a jsfiddle example. Please, help.

Http: // jsfiddle.net / dilipkumar2k6 / zEdY8 / 2 / ``> JSFiddleLink

Answer 1

I changed your feed , you should change it to something like this

<div ng-app="" ng-controller="controller" id="contentsDivID"> <div ng-repeat="chapter in chapters"> <ng:switch on="chapter.edit"> <div ng:switch-when="true"> <input type="text" ng-model="chapter.title" ng-model="chapter.title" /> <a ng-click="addChapter($index);"><i class="icon-ok"></i></a> </div> <div ng:switch-when="undefined"> <label>{{chapter.title}}</label> </div> </ng:switch> </div> </div> 

Then your javascript code for this

 function controller($scope) { $scope.chapters=[ { "_id": "567456746", "title": "Growth and Development", "type": "section", "edit":true }, { "_id": "34563465345", "title": "Links between Areas of Development", "type": "section" }, { "_id": "8776545645", "title": "Characteristics of Development", "thumbnail": "/xopus/images/templates/media-1-top-right.png", "type": "section" } ]; $scope.addChapter = function(index) { $scope.chapters[index].edit = undefined; } } 

You might want to check out angular concept documentation - this should give you some insight into how angular tracks model changes.