Question

我有一个输入框，我正在使用扫描仪，当扫描某些东西时自动输入数字，现在我想自动将该值分配给某个变量，并删除它以便它可以得到另一个输入，任何想法？

HTML

<ion-view hide-nav-bar="true">
  <ion-content class="padding"><br>

    <label class="item item-input">  
      <input type="number" ng-model="code" id="code" name="theInput" auto-focus>
    </label>

    <div class="tt"><br><br>
        Code   : <span class="art">{{code}}<br><br></span>
    </div><br>

    <button ng-click="clear(code)" class="button button-positive">
     Clear
    </button>
  </ion-content>
</ion-view>

JS

 .controller('PriCtrl', function($scope) {

    window.onload = function() {
        document.getElementById("code").focus();
    };


    $scope.clear= function(code){

    $scope.val = code;

    document.getElementById("code").value = '';

}

Answer 1

只需一行更改

$scope.clear= function(code){   
 $scope.val = code;
 $scope.code = ''; //ng-model of input is code
}

Answer 2

你应该阅读有关角度数据绑定如何工作的信息

如果变量在范围内，则视图可以访问它。如果修改变量值，控制器端的视图将自动更新，反之亦然。

你应该尽可能避免使用jQuery并从控制器中操纵DOM，如下所示：

`document.getElementById("code").value = '';`

与$scope.code = '';

完全相同

这是一个掠夺者：http://plnkr.co/edit/u3loqpxYIBMX65O9FXGD?p=preview

我将创建一个数组来存储输入

js：

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

app.controller('MainCtrl', function($scope) {

  $scope.selected = [] ;
  $scope.code = null ;
  $scope.next = function(){
    $scope.selected.push( $scope.code );
    $scope.code = null

  }
});

HTML：

<body ng-controller="MainCtrl">

 <ion-view hide-nav-bar="true">
  <ion-content class="padding"><br>

    <label class="item item-input">  
      <input type="number" ng-model="code" id="code" name="theInput" auto-focus>
    </label>

    <div class="tt"><br><br>
        Code   : <span class="art">{{code}}<br><br></span>
    </div><br>

    <button ng-click="next()" class="button button-positive">
      scan next
    </button>
  </ion-content>
</ion-view> 

<pre>{{selected|json}}</pre>


</body>

Answer 3

在Angular中，尽量不要做这样的事情document.getElementById("code").value = '';。

您只需观看code变量进行更改，如果获得新值，则将其复制到值列表中，然后从code中删除该值。

.controller('PriCtrl', function($scope) {
    $scope.$watch('code', function(newVal, oldVal) {
        if (newVal != '') {
            $scope.codelist.push(newVal);
            $scope.code = '';
        }
    });
}

输入数据后重置输入字段

3 个答案: