8

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

  1. 我有一个 statictextarea和一个inputwithng-repeat指令。

  2. 当用户在 中键入句子时textarea，input会为句子中的每个单词呈现 a。

  3. 然后，如果用户更新 any 中的文本，则句子input中的相应单词textarea也会更新（实际上是整个句子都被重新创建了）。

演示：http ://plnkr.co/edit/bSjtOK?p=preview

问题

请记住，我学习 AngularJS 的时间只有 2 周：

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

缩写代码

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();

}
4

1 回答 1

1

您遇到的有趣问题。我把你的代码放在我的页面上，我注意到的第一件事是你不能在控制器方法中传递去抖动。

我注意到的下一个问题是您有一个 ng-change，它使用 ng-change 更改另一个框上的值。我将事件更改为 Keypress 以停止摘要中的摘要。

在这里它在 JSFiddle 中工作 在此处输入链接描述

编码：

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();

    });

希望这可以解决您的问题。

于 2015-05-30T23:26:12.513 回答