AngularJS:textarea和ng重复输入之间的双向绑定_Angularjs

AngularJS:textarea和ng重复输入之间的双向绑定

angularjs

AngularJS:textarea和ng重复输入之间的双向绑定,angularjs,Angularjs,我本来想问这个问题，但我想出了一个解决办法。所以在这一点上，我想对我的解决方案提出批评我有一个静态的textarea，和一个带有ng repeat指令的input 当用户在文本区域中键入一个句子时，会为句子中的每个单词呈现一个输入然后，如果用户更新了任何输入中的文本，则文本区域句子中的相应单词将被更新（实际上整个句子将被重新创建）演示：问题请记住，我学习AngularJS才两周：我是用“有角度”的方式写的吗有什么我可以做得更好的吗我是否违反了任何禁忌缩写代码 HTML

我本来想问这个问题，但我想出了一个解决办法。所以在这一点上，我想对我的解决方案提出批评

我有一个静态的

textarea

，和一个带有

ng repeat

指令的

input

当用户在

文本区域中键入一个句子时，会为句子中的每个单词呈现一个输入


然后，如果用户更新了任何输入中的文本
，则文本区域
句子中的相应单词将被更新（实际上整个句子将被重新创建）
演示：
问题
请记住，我学习AngularJS才两周：

我是用“有角度”的方式写的吗
有什么我可以做得更好的吗
我是否违反了任何禁忌

缩写代码
HTML


JavaScript
函数WordCtrl（$scope，debounce）{
$scope.words=[]；
$scope.句子=‘你好，今天好吗？’；
//当textarea发生更改时，将调用此函数
//它分割textarea的文本并更新$scope.words
$scope.parseSequence=函数（）{
var words=$scope.句子.split（/\s+/g）；
var wordObjects=[]；
对于（var i=0；i您遇到的有趣问题，我将您的代码放在我的页面上，我注意到的第一件事是您不能在controller方法中传递debounce
我注意到的下一个问题是，您有一个ng更改，它使用ng更改更改另一个框上的值。我将事件更改为Keypress以停止摘要中的摘要
在这里，它在JSFIDLE中工作
守则：
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();

    });

angular.module（“门户”，[]）.controller（“WordCtrl”，函数（$scope）{
$scope.words=[]；
$scope.句子=‘你好，今天好吗？’；
$scope.parseSession=函数（）{
var words=$scope.句子.split（/\s+/g）；
var wordObjects=[]；
for（var i=0；i-1）{
$scope.parseSentenceDebounced（）；
}
}
$scope.parseSession（）；
});

希望这能解决您的问题。
看起来不错，不过最好使用$watch而不是'ngChange'，因为ngModel
指令是如何工作的（视图值和实际值之间存在差异，在转换值时，您可能会进入竞争状态）.只有一个问题：为什么要精确地去抖动？我添加去抖动是因为如果立即调用parseSession（）
（按下键时会触发ng change），视图将重新加载，而对输入的关注将丢失。@fastreload+1建议$watch…应该不需要取消加载，否？@JLYES在回应您最后的评论时-数组上的基本$watch只有在整个数组被重新分配时才会触发。它不会监视数组中项目的更改。将true作为第三个参数（即$scope.$watch（'words'，onWordsChanged，true）
）将告诉angular执行“深度监视”或查看$scope.$watchCollection
）。