0

我是 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 是否可以像这样使用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)"/>

或其他方式

4

2 回答 2

1

我不是 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 在输入字段获得焦点时触发（例如，当您使用 tab 键到达该字段时，这也会被触发），而 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>

于 2017-10-03T14:29:34.937 回答
0

如果您想要输出两个不同的数据，您应该在输入中使用两个分隔的 ng-model。但我不太确定你想在这里做什么.. 你能试着解释一下吗？

于 2017-10-03T12:39:10.353 回答