为$ scope添加输入值

时间:2015-05-19 14:22:18

标签: javascript jquery html angularjs

我的小提琴按预期工作JSFiddle

但我现在坚持要修改它。

    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;,因为这只是我创建时的暂时性,我还想在dropmenu中添加一个Onchange函数,以便清除此输入值并强制用户在结果出现之前输入新值。任何人都可以建议如何做到这一点?

1 个答案:

答案 0 :(得分:0)

您可以将$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