AngularJS:textarea和ng-repeat-ed输入之间的双向绑定

时间:2013-04-03 20:52:57

标签: angularjs

我打算问这个问题,但我想出了一个解决方案。所以在这一点上,我正在寻找对我的解决方案的批评。

  1. 我有一个静态textareainput带有ng-repeat指令。

  2. 当用户在textarea中输入一个句子时,会为句子中的每个单词呈现input

  3. 然后,如果用户更新任何input中的文字,textarea句子中的相应字词就会更新(实际上重新创建了整个句子)。

  4. 演示: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();
    
    }
    

1 个答案:

答案 0 :(得分:1)

你有趣的问题。我把你的代码放在我的页面上,我注意到的第一件事就是你无法在控制器方法中通过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();

    });

希望这能解决您的问题。