Question

我正在编写一个程序，它接受两个数字的输入值，并提供指定范围内的随机值。我有固定的控制器来重新调整最小值和最大值，它一旦我放置数字就可以工作但是如果我添加了ng-model值，它会返回＆＃34; NaN＆＃34;。这是html

        <div class="col-sm-4" ng-controller="ValueController">

          <div class="row">
            <div class="col-sm-6"><input type="number" ng-model="value.one">
            </div>
            <div class="col-sm-6"><input ng-model="value.two"></div>
          </div>   
        </div>

        <div class="col-sm-4">

            <a ng-href="results.html" ng-controller="ShuffleController" 
            ng-click="shuffle(100100, 110000)">
        <img src="img/before.png" style="width: 500px; height: auto;"></a>
          </ul>

        </div>

以下是app.js的一部分：

    // Angular App Initialization
var app = angular.module('Shuffle', ['ngRoute']);

// Declaring Globals
app.run(function($rootScope) {

    $rootScope.shuffled = [];
    $rootScope.shuffleValues = {};

    $rootScope.getRand = function(min, max) {
      var number = Math.floor(Math.random() * (max - min)) + min;
      var leadingZeroes = 6 - number.toString().length;
      $rootScope.shuffled.push([[min, max], number.toString().length < 6 ? ('0'.repeat(leadingZeroes) + number) : number]);
      window.localStorage.setItem('shuffled', JSON.stringify($rootScope.shuffled));
    }
});

// Shuffle Controller
app.controller('ShuffleController', function($scope, $rootScope, $window) {
  console.log('Welcome to TheShuffler!');
  var results = window.localStorage.getItem('shuffled');
  results = JSON.parse(results);
  $scope.shuffle = function(min, max) {
    console.log("You shuffled!");
    console.log(results);
    $rootScope.getRand(min, max);
  }
});

// Results Controller
app.controller('ResultsController', function($scope) {
  var results = window.localStorage.getItem('shuffled');
  $scope.shuffleResults = JSON.parse(results);
  $scope.quantity = 3;
  console.log($scope.shuffleResults);
});

// Reshuffling Controller
app.controller('ReshuffleController', function($scope, $rootScope, $route, $window, $location) {
  $scope.reshuffle = function(){
    $window.location.reload();
    console.log('You reshuffled!');
    var results = window.localStorage.getItem('shuffled');
    results = $scope.shuffleResults = JSON.parse(results);

    for (var i = 0; i < results.length; i++) {
      var min = results[i][0][0]
      var max = results[i][0][1]
      $rootScope.getRand(min, max)
    }
  }
});

// Shuffle Entries Verification Controller
app.controller('ShuffleEntriesVerificationController', function($scope, $window) {
  console.log('EntriesHere!');
  $scope.entryCheck = function(){
    var results = window.localStorage.getItem('shuffled');
    results = JSON.parse(results);
    console.log("You checked!");
    console.log(results);
    var verficationMessage = "Maximum Entries Exceeded. Please Click Shuffle";
    if (results.length > 2) {
      $window.alert(verficationMessage);
      $window.location.reload();
    }
  }
});

app.controller('ValueController', ['$scope', function($scope) {
          $scope.value = {
            one: 000100,
            two: 005100
          };

        }]);


it('should check ng-bind', function() {
  var nameInput = element(by.model('value'));

  expect(element(by.binding('value')).getText()).toBe('Whirled');
  nameInput.clear();
  nameInput.sendKeys('world');
  expect(element(by.binding('value')).getText()).toBe('world');
});

当我这样做时，我得到了NaN：

<a ng-href="results.html" ng-controller="ShuffleController" 
ng-click="shuffle(value.one, value.two)">
<img src="img/before.png" style="width: 500px; height: auto;"></a>

有什么问题？

Answer 1

你的控制器错误：

ng-controller="ShuffleController"

在你的应用程序中你有这个控制器：

app.controller('ValueController',...
    ...
}]);

Answer 2

您不必传递模型，因为参数值将自动绑定并在您的随机播放功能中可用。

如果您的NaN错误，请创建一个代码段以更好地了解您的问题

输入值在ng-click上返回NaN

2 个答案: