добавление входного значения для $ объема

Question

Мои Fiddle работает по назначению JSFiddle,

, но теперь я застрял с ammending его.

var myApp = angular.module('myApp', []); 

function TheController($scope) { 

    $scope.nextVXPLevelValue = 3; 
    $scope.calculatedVXP = $scope.nextVXPLevelValue; 

    $scope.allVXP = [2.41, 2.50, 1.80, 1.56, 1.43, 1.35, 1.30, 1.26, 1.23, 1.20, 1.1, 1.17, 1.16, 1.14, 1.13, 1.13, 1.12, 1.11, 1.11, 1.10, 1.10, 1.09, 1.09, 1.08, 1.08]; 
    $scope.bonus = [5, 10, 15, 20, 25, 29, 33, 37, 41, 45, 48, 51, 54, 57, 60, 62, 64, 66, 68, 70, 71, 72, 73, 74, 75]; 

    $scope.namedLevel = ['Inexperienced','Recruit 1','Recruit 2','Recruit 3','Recruit 4','Hunter 1','Hunter 2','Hunter 3','Hunter 4','Hunter 5','Elite 1','Elite 2','Elite 3','Elite 4','Elite 5','Veteran 1','Veteran 2','Veteran 3','Veteran 4','Veteran 5','Specialist 1','Specialist 2','Specialist 3','Specialist 4','Specialist 5','Legendary']; 


    $scope.Levels = [ 
     {LevelId : 50, LevelName : '--Select--' },   
     {LevelId : 0, LevelName : 'Inexperienced' },   
     {LevelId : 1, LevelName : 'Recruit 1' }, 
     {LevelId : 2, LevelName : 'Recruit 2'}, 
     {LevelId : 3, LevelName : 'Recruit 3'}, 
     {LevelId : 4, LevelName : 'Recruit 4'}, 
     {LevelId : 5, LevelName : 'Hunter 1'}, 
     {LevelId : 6, LevelName : 'Hunter 2'}, 
     {LevelId : 7, LevelName : 'Hunter 3'}, 
     {LevelId : 8, LevelName : 'Hunter 4'}, 
     {LevelId : 9, LevelName : 'Hunter 5'}, 
     {LevelId : 10, LevelName : 'Elite 1'}, 
     {LevelId : 11, LevelName : 'Elite 2'}, 
     {LevelId : 12, LevelName : 'Elite 3'}, 
     {LevelId : 13, LevelName : 'Elite 4'},  
     {LevelId : 14, LevelName : 'Elite 5'}, 
     {LevelId : 15, LevelName : 'Veteran 1'}, 
     {LevelId : 16, LevelName : 'Veteran 2'}, 
     {LevelId : 17, LevelName : 'Veteran 3'}, 
     {LevelId : 18, LevelName : 'Veteran 4'},  
     {LevelId : 19, LevelName : 'Veteran 5'}, 
     {LevelId : 20, LevelName : 'Specialist 1'}, 
     {LevelId : 21, LevelName : 'Specialist 2'}, 
     {LevelId : 22, LevelName : 'Specialist 3'}, 
     {LevelId : 23, LevelName : 'Specialist 4'}, 
     {LevelId : 24, LevelName : 'Specialist 5'}, 
     {LevelId : 25, LevelName : 'Legendary'} 
    ]; 
    $scope.LevelId = 50; 
    $scope.$watch('currentLevel', function (newValue, oldValue) { 
     $scope.vxp = []; 
     $scope.level = []; 
     $scope.bonusResult = []; 
     $scope.renamedLevel = []; 

     for (var i = 0 + ($scope.currentLevel); i < $scope.allVXP.length; i++) { 
      $scope.calculatedVXP *= $scope.allVXP[i]; 
      $scope.vxp.push(Math.floor($scope.calculatedVXP)); 
      // $scope.level.push(i + 1); 
      $scope.renamedLevel.push($scope.namedLevel[i + 1]); 
      $scope.bonusResult.push(+$scope.bonus[i]); 
     } 
$scope.calculatedVXP = $scope.nextVXPLevelValue;  
    }); 
} 

теперь я хочу ручной ввод заменить $scope.nextVXPLevelValue = 3; как это было лишь временным, пока я создавал, и я также хочу, чтобы добавить функцию OnChange в dropmenu так что рассеется этот вход значение и заставляет пользователя для ввода нового значения до появления результатов. Может ли кто-нибудь посоветовать, как это сделать?

Answer 1

Вы можете связать $scope.nextVXPLevelValue с текстовым полем ввода, так что, когда пользователь вводит значение, я буду привязан к $scope.nextVXPLevelValue.

На вас HTML-файла:

<input type="text" ng-model="nextVXPLevelValue" /> 

Для выбора, вы можете использовать ng-change, это радиально-путь onChange события.

<select id="mySelect" ng-change="clearXPLevel()"> 
... 
</select> 

В файле контроллера:

$scope.clearXPLevel = function() { 
    $scope.nextVXPLevelValue = null; 
} 

Полезные ссылки:

Выбрать: https://docs.angularjs.org/api/ng/directive/select

ngChange: https://docs.angularjs.org/api/ng/directive/ngChange