Угловой ввод числа с цифровой клавиатуры в текстовое поле, на которое нажали

Я новичок в Angular, и сейчас я столкнулся с проблемой: у меня есть цифровая клавиатура и несколько текстовых полей. Мне нужно вводить в конкретное текстовое поле с цифровой клавиатуры. Вот код

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script> 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = ''
   });
</script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="count = count + 1">1</button>
<button id="btn2" ng-click="count = count + 2">2</button>
<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}"/>
<label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}"/>
</div> 
</body>
</html>

Теперь, если я нажму Textbox1, затем нажму кнопку 1 или 2, текст должен быть только на Textbox1, а не на >textbox2 возможно ли привязать значение к value с помощью ng-click, как это

функция на контроллере

$scope.change = function(evt) {
    evt.target.value={{count}};
    alert(evt.target.id)

html

<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}"  ng-click="change($event)"/>
        <label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}"  ng-click="change($event)"/>

или другим способом


angularjs asp.net numpad angularjs-ng-click
person Imran Hossain    schedule 03.10.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не уверен на 100%, что понял, что вы хотите сделать, но если я прав, это должно делать то, что вы хотите:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script> 
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.count = 0;
        $scope.field1count;
        $scope.field2count;
        $scope.selectedField = 0;

        $scope.calculateField = function(amount){
            var result = $scope.count + amount;
            $scope.count = result;
            if($scope.selectedField == 1){
                $scope.field1count = result;
            } else if($scope.selectedField == 2){
                $scope.field2count = result;
            }
        }
    });
</script>  
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <button id="btn1" ng-click="calculateField(1)">1</button>
    <button id="btn2" ng-click="calculateField(2)">2</button>
    <label>Textbox1</label>
    <input type="text" id="Textbox1" ng-focus="selectedField = 1" ng-model="field1count"/>
    <label>Textbox2</label>
    <input type="text" id="Textbox2" ng-focus="selectedField = 2" ng-model="field2count"/>
</div>
</body>
</html>

Если вы хотите, чтобы два поля ввода отображали разные значения, вам нужно фактически присвоить им разные значения, так как двусторонняя привязка angular означает, что значение будет обновляться как в модели, так и в контроллере одновременно.

В этом случае Ng-focus также можно заменить на ng-click, если вы предпочитаете использовать его. Ng-focus срабатывает, когда поле ввода получает фокус (например, когда вы используете клавишу табуляции для доступа к полю, это также будет срабатывать), в то время как ng-click делает это при нажатии на поле.

В этом примере ng-model="field1count" также можно заменить на value="{{field1count}}", как вы сделали в своем примере, но использование ng-model больше подходит для использования angular.

Рабочий фрагмент:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.field1count;
    $scope.field2count;
    $scope.selectedField = 0;

    $scope.calculateField = function(amount){
      var result = $scope.count + amount;
        $scope.count = result;
        if($scope.selectedField == 1){
            $scope.field1count = result;
        } else if($scope.selectedField == 2){
            $scope.field2count = result;
        }
    }
   });
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <button id="btn1" ng-click="calculateField(1)">1</button>
    <button id="btn2" ng-click="calculateField(2)">2</button>
    <label>Textbox1</label><input type="text" id="Textbox1" ng-click="selectedField = 1" ng-model="field1count"/>
    <label>Textbox2</label><input type="text" id="Textbox2" ng-click="selectedField = 2" ng-model="field2count"/>
    </div>
</body>
</html>

person Patrick    schedule 03.10.2017
comment
Большое спасибо, поскольку я новичок в программировании, эти вещи были мне не совсем понятны. Теперь я понял это ясно. Я не думал таким образом. Большое спасибо, я немного изменился и получил свое решение. Еще раз спасибо - person Imran Hossain; 03.10.2017

arrow_upward
0
arrow_downward

Вы должны использовать две отдельные модели ng на своем входе, если вы хотите вывести два разных данных. Но я не совсем уверен, что вы хотите здесь сделать. Не могли бы вы попытаться объяснить это немного подробнее?

person Guillaume Roche-Bayard    schedule 03.10.2017
comment
Спасибо @guillaume-roche-bayard. я нашел свой ответ - person Imran Hossain; 03.10.2017