angularjs - 「テキストボックス」から「ラベル」への変更を管理するためのAngular js双方向データバインディングの問題

Question

「編集」フィールドを持つデータモデルを使用しています。「編集」値に基づいて、テキストボックスまたはラベルを使用します。ユーザーが編集後に「OK」をクリックすると、テキストボックスがラベルに変わるはずです。しかし、どういうわけかそれは機能していません。以下はjsfiddleの例です。助けてください。

http://jsfiddle.net/dilipkumar2k6/zEdY8/2/`">JSFiddleLink

Answer 1

私はあなたのFiddleを変更しました。このようなものに変更する必要があります

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

次に、JavaScriptコードをこれに

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

角度の概念に関するドキュメントをチェックアウトすることをお勧めします。これにより、角度トラックがモデルにどのように変化するかについてのハイライトが得られるはずです。