0

AngularJS APP

I would like to understand how I can solve this issue of the infinite digest Loop, should I write a conditional?

The objective is to use angular's 2-way data binding, but I need to modify the output to sort the letters randomly.

My HTML:

                <div class="container-fluid phrase-container text-center">
                <!-- == User Phrase Input == -->
                <input type = "text" ng-model = "phrase.firstPhrase" placeholder="Please enter phrase"><br><br>
            </div>

                <div class="container-fluid anagram-container text-center">
                <!-- == Final anagram ==  -->
                Anagram: {{phrase.fullAnagram()}}
            </div>

My javascript:

   var app = angular.module("app", []);

   app.controller('mainController', function($scope) {
   $scope.main = {};
   $scope.main.title = "AnagramJS";

// Refresh Page acts as reroll button
$scope.reloadRoute = function() {
    $route.reload();
};

// Anagram Creation
$scope.phrase = {
    firstPhrase: "",
    fullAnagram: function() {
        var finalPhrase;
        finalPhrase = this.firstPhrase.split('').sort(function() {
            return 0.5 - Math.random()
        }).join('');

        return finalPhrase

    }
};
   });
FreshOceans
  • 63
  • 9

1 Answers1

0

Simple $watch on scope model seems to work fine, so you could use:

<input ng-model="word" type="text"/>
<p>
   {{anagram}}
</p>

And in js:

$scope.$watch('word', (newVal, oldVal) => {
if (newVal) {
  // set anagram to randomize
  $scope.anagram = newVal.split('').sort(function() {
    return 0.5 - Math.random()
  }).join('');
} else {
  // empty anagram if word is empty
  $scope.anagram = "";
}
});

You can check how it works in this fiddle: https://fiddle.jshell.net/pegla/kemrr0ka/4/

UPDATE:

There's no need to use routing for reroll button, you can simply create function and call it multiple times, I added one way of doing it in my latest fiddle:

https://fiddle.jshell.net/kemrr0ka/5/

pegla
  • 1,866
  • 4
  • 17
  • 20
  • Thanks, it worked. I knew it had to do with $scope.$watch, but did not fully understand how to use. – FreshOceans Oct 11 '17 at 23:02
  • No problem for future reference - you use $scope.$watch to watch for changes on $scope properties. In your case it's $scope.word - you don't specify $scope before because you're watching changes on $scope properties - newVal will contain new value that changed (word) and oldVal will be old value for 'word' before change. – pegla Oct 11 '17 at 23:48
  • After I made the change, my reroll button does not properly function. I do not understand why, I get the issue: $route is not defined. I updated my project on live. I believe i am trying to reload a route. – FreshOceans Oct 11 '17 at 23:55
  • you don't need routing for simple thing like this, even though you should learn about routing for this particular example it's overkill. I updated answer to answer with one way of doing it. – pegla Oct 12 '17 at 00:11
  • Thanks for the help pegla. I understand how your method is more efficient for this function. I am trying to figure out now how to input it into my controller within my app object. Should I make a second controller? – FreshOceans Oct 12 '17 at 18:39