Question

使用angular为用户提供可输入值的表单，但希望提供+/-按钮以允许他们在需要时使用它（平板电脑等）

我对角度的了解仍然在扩展，我不确定如何完成任务，我目前正在设置验证，但不知道如何解决这个问题。我应该在输入中加入默认值，例如0并称为{{count}}增加和减少？或尝试直接影响ng模型。

目前，按下按钮时也没有任何反应。

基本上，表单会收集信息，然后将信息发送到运行某些数字的计算器服务。

HTML

<div class="form-block">
                    <label for="totalStaff">Number of Staff</label>
                    <button ng-click="staff.staffTotal--">-</button>
                    <input class="form-control max-width" type="number" id="totalStaff" name="totalStaff" placeholder="Total Staff" 
                        ng-model="staff.staffTotal" 
                        ng-blur="myform.totalStaff.$touched=true" 
                        ng-required="true" 
                        placeholder="{{myform.totalStaff.$touched && myform.totalStaff.$error.required ? 'Please Enter a value' : 'Induction Courses'}}" ng-class="{'input-error': myform.totalStaff.$touched && myform.totalStaff.$error.required}" />
                    <button ng-click="staff.staffTotal++">+</button>
                </div>

控制器

(function() {
    "use strict";

    var app = angular.module("app");

    app.controller('StaffDetailCtrl', ["$scope", "$location", "CalculatorService", function($scope, $location, calculatorService) {
        $scope.clicked = function() {
            calculatorService.setStaff($scope.staff);
            $location.path('/additionalfeatures');
        };

        $scope.staff = angular.copy(calculatorService.getStaff());
    }]);
}());

Answer 1

Here is a plunker for you with working demo。

在您的应用中共享数据的最佳方式是工厂。另请阅读watchers

希望它有所帮助。

Angular 1.X创建一个带有按钮递增/递减值的表单

1 个答案: