在AngularJS中选择radiobutton时,请关注文本框

时间:2016-02-16 05:46:26

标签: angularjs textbox radio-button focus

当有人点击分配给它的无线电按钮时,有人可以告诉我如何将注意力集中在我的文本框上?我使用角js。谢谢你的想法

2 个答案:

答案 0 :(得分:4)

我为你创建了example

<强> HTML:

<body ng-app="scopeExample">
  <div ng-controller="MyController">
    <div ng-repeat='item in mas'>
      <input type="radio" name='somename' ng-model="item.select" value="true" ng-click='clear(item)'>
      <input type='text' focus='item.select'/>
      <br>
    </div>
  </div>
</body>

<强>使用Javascript:

angular.module('scopeExample', [])
  .controller('MyController', ['$scope', function($scope) {

    $scope.mas=[
      {id:1,select:false},
      {id:2,select:false},
      {id:3,select:false},
      {id:4,select:false}
      ];

  $scope.clear = function(item){
    $scope.mas.forEach(function(x){
      if(x != item)
        x.select=false;
    });
  }

  }]).directive('focus',['$timeout', '$parse', function($timeout, $parse){

    return {
      link:function (scope, element, attrs) {
            var model = $parse(attrs['focus']);
            scope.$watch(model, function (value) {                
                if (eval(value)) 
                    $timeout(function () {
                        element[0].focus();
                    });                
            });
    }
  }

  }]);

答案 1 :(得分:0)

我将为您提供伪代码,您可以根据自己的需要进行更改。现在,代码有一个单选按钮,选中它时将关注输入元素。但是,您可以根据需要在复选框上实现这些。

HTML:

SELECT commande.idClient,
       commande.sum1 as TotalCommande,
       facture.sum2 as TotalFacture 
FROM
    (SELECT t.idClient,sum(s.montantcommande) as sum1
    FROM Client t INNER JOIN Commande s ON(t.idClient = s.idClientCommande)
    GROUP BY t.id_client) commande
INNER JOIN
    (SELECT t.idClient,sum(s.montantfacuore) as sum2
    FROM Client t INNER JOIN Facture s ON(t.idClient = s.idClientfacture)
    GROUP BY t.id_client) facture
ON(facture.idClient = commande.idClient)

脚本:

<div ng-controller="MyCtrl">
    <input type="radio" ng-model="focusRadio" value=0>
    <input ng-model="name" focus>
</div>

以下是plunker:http://plnkr.co/edit/ABHCRIm95EyNUI8nWczh?p=preview。将输入类型更改为复选框以更好地了解功能。