2017-04-25 79 views
-1

我正在编写一个程序,它接受两个数字的输入值并从指定的范围提供一个随机值。我有固定的控制器洗牌最小值和最大值,它一旦我把数字,但如果我添加ng模型值,它返回“NaN”它的工作原理。下面是HTML输入值在ng-click上返回NaN

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

问题是什么?

+0

代码上plunker请 –

+0

[创建一个最小的,完整的,并且可验证的例子]一个更好的角度(https://stackoverflow.com/help/mcve) – Manish

+0

增加缺少的内容 – Debaryoh

回答

2

你有一个错误的控制器:

ng-controller="ShuffleController" 

,而在你的应用程序,你有这样的控制器:

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

它可能引发控制器未找到错误。 –

+0

而且他还可以用控制器和$ scope对象检查标记元素的起点和终点。 –

+0

@kailashyogeshwar可能是!不能说OP有什么代码。这只是OP发布的一个引人注目的事情。 – Jai

0

您不必通过模型参数值将自动绑定和在您的洗牌功能中可用。

在你的NaN错误的情况下创建一个片段,让您的问题