Question

我正处于Angularjs的学习阶段，并且在最近两天陷入困境。我已经看到很多答案，但不知道如何在我的情况下调整这些解决方案。我想要做的是使用angularjs通过按钮更新输入字段。

// html
<body ng-controller="Controller">

    <input type="number" ng-model="data" update-view>
            <br>
    <label for="data">{{data}}</label>
    <button name="btn1"  ng-click='updateInput(1)'>1</button>

</body>

  // js
 var app = angular.module('calculator',[]);

app.controller('Controller', function($scope, $timeout){
    $scope.data = 0;
    var val = '';
    $scope.updateInput = function(param) {

        val += String(param);
        $scope.data = val;
        // val = param;
        // $scope.data = val;       
    }

});

表达式得到评估，但输入字段未更新。我看过$setViewValue和$render的其他更新视图，但我不知道如何在这里使用它们。

app.directive('updateView', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            element.bind('change', function () {
                // console.log(ngModel);
                scope.$apply(setAnotherValue);
            });
            function setAnotherValue() {
                ngModel.$setViewValue(scope.data);
                ngModel.$render();
            }
        }
    };
});

任何帮助将不胜感激。感谢

Answer 1

您不需要更新指令。
您似乎将字符串值设置为$scope.data，这会引发错误，因为输入类型为number。

＆＃13;

angular.module('calculator', [])
.controller('Controller', function($scope){
  $scope.data = 0;
  var val = '';
  $scope.updateInput = function(n){
    val = n;
    $scope.data = val;
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<body ng-app="calculator" ng-controller="Controller">
  <input type="number" ng-model="data">
  <button ng-click="updateInput(1)">1</button>
</body>

＆＃13;

Answer 2

我注意到，如果不将参数转换为字符串，输入字段将使用更改的模型进行更新，但只要我将其更改为String，就不会更新输入字段。还有控制台中抛出的错误。所以我只是在点击和试用的基础上，通过仅将int的一行更改为$scope.data = val;将其转换回$scope.data = parseInt(val, 10);，并且输入字段全部更新，就像我想要的那样。正如@cither建议的那样，我不需要为此指示。以下是我的工作代码

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

app.controller('Controller', function($scope, $timeout){
        $scope.data = 0;
        var val = '';
        $scope.updateInput = function(param) {

            val += String(param);
            $scope.data = parseInt(val, 10);       
        }

    });

Angularjs

2 个答案: