javascript - AngularJS- 改变 ng-model 的值

Question

我是 AngulatJs(1.4) 的新手。我的 Angular 脚本创建了两个按钮(加号和减号)以便用户可以增加/减少产品的数量。它工作正常。但是，当我单击更新时，它会再次加载页面并将数量重置为 1($scope.quantity=1;)。但是，我想分配 <%=product['qty'].to_i%>" 的值至 ng-model="quantity" .可能吗？

var myapp = angular.module("mymodule", []);
myapp.controller('additctl', function ($scope) {
    $scope.quantity = 1;
    $scope.addval = function (val) {
        console.log(val);
        $scope.quantity = val + 1;
    }

    $scope.subval = function (val) {
        if (val > 0) {
            $scope.quantity = val - 1;
        }
    }
});

<form accept-charset="UTF-8" action="change_quantity" method="post">
    <div ng-controller="additctl">
        <button type="button" ng-click=subval(quantity)>-</button>
        <input type="number" ng-model="quantity" value="<%=product['qty'].to_i%>" min="1" max="99" required>
        <button type="button" ng-click=addval(quantity)>+</button>
        <input type="submit" class="btn btn-success" name="button" value="update">
    </div>
</form>

Answer 1

当然，这是可能的。只需在 Controller 中设置即可:

myapp.controller('additctl',function($scope){
    $scope.quantity = <%=product['qty'].to_i%>;

确保删除 value来自 <input> 的属性.

如果你的JS在一个单独的文件中，你也可以这样做:

1. 删除 $scope.quantity =从你的 Controller 。
2. 像这样设置值:

<input type="number" ng-model="quantity"
    ng-init="quantity = <%=product['qty'].to_i%>"
    min="1" max="99" required>

ng-init 将在创建元素时运行一次。