AngularJS:textarea和ng-repeat-ed输入之间的双向绑定
发布时间:2020-12-17 07:21:07 所属栏目:安全 来源:网络整理
导读:我打算问这个问题,但我想出了一个解决方案.所以在这一点上,我正在寻找对我的解决方案的批评. 我有一个静态textarea,以及一个带有ng-repeat指令的输入. 当用户在textarea中键入一个句子时,将为句子中的每个单词创建一个输入. 然后,如果用户更新任何输入中的文
我打算问这个问题,但我想出了一个解决方案.所以在这一点上,我正在寻找对我的解决方案的批评.
>我有一个静态textarea,以及一个带有ng-repeat指令的输入. 演示:http://plnkr.co/edit/bSjtOK?p=preview 问题 请记住,我只有两周时间进入AngularJS学习: >我是以“棱角分明”的方式写的吗? 缩写代码 HTML <textarea ng-model="sentence" ng-change="parseSentence()" style="width: 100%; height: 15em;"></textarea> <input type="text" ng-repeat="w in words" ng-model="w.word" ng-change="buildSentance(w)" /> JavaScript的 function WordCtrl($scope,debounce) { $scope.words = []; $scope.sentence = 'Hello there how are you today?'; // this is called when the textarea is changed // it splits up the textarea's text and updates $scope.words $scope.parseSentence = function() { var words = $scope.sentence.split(/s+/g); var wordObjects = []; for (var i=0;i<words.length;i++) { wordObjects.push({word: words[i]}); } if ((words.length == 1) && (words[0] === '')) { $scope.words = []; } else { $scope.words = wordObjects; } }; $scope.parseSentenceDebounced = debounce($scope.parseSentence,1000,false); $scope.buildSentance = function(w) { var words = []; for (var i=0;i<$scope.words.length;i++) { var word = $scope.words[i].word; if (word.replace(/s+/g,'') !== '') { words.push(word); } } $scope.sentence = words.join(' '); // if the user puts a space in the input // call parseSentence() to update $scope.words if (w.word.indexOf(' ') > -1) { $scope.parseSentenceDebounced(); } } $scope.parseSentence(); }
你有趣的问题.我把你的代码放在我的页面上,我注意到的第一件事就是你无法在控制器方法中通过debounce.
下一个问题我注意到你有一个ng-change,用ng-change改变另一个盒子上的值.我将事件更改为Keypress以停止摘要中的摘要. 这是在JSFiddle enter link description here中工作 代码: HTML <body ng-app="portal"> <div ng-controller="WordCtrl"> <textarea ng-model="sentence" ng-keypress="parseSentence()" style="width: 100%; height: 15em;"></textarea> <input type="text" ng-repeat="w in words" ng-model="w.word" ng-keypress="buildSentance(w)" /> </div> </body> 使用Javascript angular.module("portal",[]).controller("WordCtrl",function($scope) { $scope.words = []; $scope.sentence = 'Hello there how are you today?'; $scope.parseSentence = function () { var words = $scope.sentence.split(/s+/g); var wordObjects = []; for (var i = 0; i < words.length; i++) { wordObjects.push({ word: words[i] }); } if ((words.length == 1) && (words[0] === '')) { $scope.words = []; } else { $scope.words = angular.copy(wordObjects); } } $scope.buildSentance = function (w) { var words = []; for (var i = 0; i < $scope.words.length; i++) { var word = $scope.words[i].word; if (word.replace(/s+/g,'') !== '') { words.push(word); } } $scope.sentence = words.join(' '); // if the user puts a space in the input // call parseSentence() to update $scope.words if (w.word.indexOf(' ') > -1) { $scope.parseSentenceDebounced(); } } $scope.parseSentence(); }); 希望这能解决您的问题. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |