angularjs - Angular js双向数据绑定(bind)问题管理 "text box"到 "label"的变化

标签 angularjs angularjs-scope

我正在使用具有“编辑”字段的数据模型。并且基于“编辑”值,我可以使用文本框或标签。我希望一旦用户在编辑后单击“确定”,那么文本框应该更改为标签。但是不知何故它不起作用。以下是 jsfiddle 示例。请帮忙。

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

最佳答案

我已经修改了你的 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;
    }
}

您可能想查看 angular concepts documentation - 它应该让您重点了解 Angular 轨迹如何改变模型。

关于angularjs - Angular js双向数据绑定(bind)问题管理 "text box"到 "label"的变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17902295/

相关文章:

javascript - 在 Angular.js 中绑定(bind)服务变量

javascript - 使用 Controller 方法选择 Angular 选项卡

javascript - 如何在与链接函数隔离的范围内设置范围变量

javascript - 从 ngRoute 迁移到 ui.router

javascript - 使用ui路由器在angularjs中重定向页面时如何传递参数?

css - 禁用带有 CSS 覆盖和消息 "No data to show"的虚拟 highcharts 图。 AngularJS,没有 jQuery

angularjs - 加载 JSON 以显示数据,使用 ng-repeat {ANGULAR.JS}

javascript - Angular 1.3 重大更改 - 设置范围但在 $apply 之前重置

angularjs - Angular JS - 在树内就地编辑

javascript - Angular 替换 $scope 和 $apply 中的数组不起作用