栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

ng-list中内容可编辑项的双向绑定

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

ng-list中内容可编辑项的双向绑定

编辑

这是一个基于Angular文档中示例的示例,该示例仅使用

ng-repeat
。由于
ng-repeat
为每次迭代都创建了一个新的作用域,所以这不是问题。

<!doctype html><html ng-app="form-example2"><head>    <script src="http://pre.angularjs.org/1.0.5/angular.min.js"></script>    <script>    angular.module('form-example2', []).directive('contenteditable', function() {        return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) {     // view -> model     elm.bind('blur', function() {         scope.$apply(function() {  ctrl.$setViewValue(elm.html());         });     });     // model -> view     ctrl.$render = function() {         elm.html(ctrl.$viewValue);     };     // load init value from DOM     ctrl.$setViewValue(elm.html()); }        };    });    </script></head><body>    <div ng-repeat="i in [1, 2, 3]">        <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>        <pre>model = {{content}}</pre>    </div>    <style type="text/css">    div[contentEditable] {        cursor: pointer;        background-color: #D0D0D0;    }    </style></body></html>

原版的

这里有一个示例,说明了如何做到这一点:http :
//docs.angularjs.org/guide/forms

它在“实现自定义表单控件(使用ngModel)”标题下。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/436358.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号