AngularJS：應用功能2路數據與重擲按鈕（reloadRoute ??）結合

AngularJS APP AngularJS：應用功能2路數據與重擲按鈕（reloadRoute ??）結合

我想知道我怎麼能解決這個無限循環消化這個問題，我應該寫一條件？

目標是使用角度的2路數據綁定，但我需要修改輸出以隨機排序字母。

我的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>

我的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 

    } 
}; 
    });

來源

2017-10-11 FreshOceans

我如何添加一個重擲按鈕只會再次訴諸字？換一個不同的謎語 – FreshOceans

的範圍模型簡單$腕錶似乎做工精細，所以你可以使用：

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

而且在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 = ""; 
} 
});

您可以檢查它是如何工作在這個小提琴：https://fiddle.jshell.net/pegla/kemrr0ka/4/

UPDATE：

有沒有必要使用路由的重擲按鈕，你可以簡單地創建函數並調用它多次，我加了一個方式這樣做在我的最新小提琴：

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

來源

2017-10-11 19:54:00 pegla

謝謝，它工作。我知道這與$ scope。$ watch有關，但並未完全理解如何使用。 – FreshOceans

將來的參考沒有問題 - 您可以使用$ scope。$ watch來監視$ scope屬性的更改。在你的情況下，它是$ scope.word - 你之前沒有指定$ scope，因爲你正在觀察對$ scope屬性的更改 - newVal將包含更改（word）的新值，並且oldVal在更改前會是'word'的舊值。 – pegla

我做了更改後，我的重新按鈕功能不正常。我不明白爲什麼，我得到這個問題：$ route沒有被定義。我現場更新了我的項目。我相信我正在嘗試重新加載路線。 – FreshOceans

AngularJS：應用功能2路數據與重擲按鈕（reloadRoute ??）結合

回答

相關問題