2015-07-22 124 views
1
**HTML** 

<div ng-app="myApp" ng-controller="myCtrl"> 
    <input placeholder="Enter your teams name" ng-model="team_input" ng-show="myVar" ng-focus="true" class="team_input" ng-class="{redPlaceholder : newteamfocus, whitePlaceholder : !newteamfocus}" ng-blur="newteamfocus=true" type="text" name="team_input" autofocus required/> 
    <button ng-click="toggleTeamField()">Add New</button> 
</div> 


**JS** 

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.myVar = false; 
    $scope.toggleTeamField = function() { 
     $scope.myVar = !$scope.myVar; 
     $scope.newteamfocus = false; 
     $scope.team_input = ""; 
    }; 
}); 

在这里,我可以显示隐藏的输入框,但闪烁的光标不会来,当我点击添加按钮。如何在输入框中显示闪烁的光标。 Plunker点击添加新按钮时如何在输入框中闪烁光标?

+0

的可能重复[点击一个按钮以打开闪烁光标一个输入字段(http://stackoverflow.com/questions/16590563/click-a-button-to-打开一个输入字段与闪烁光标) –

+0

@JafferWilson。凉。这是由jQuery完成的。不使用angular.js –

+0

@RameshRajendran你在说什么,我不明白? –

回答

2

您可以使用一个指令来实现这一点,该指令在单击时关注元素。需要注意的

http://plnkr.co/edit/rrjbCtrhxSkG0oRTL0TU?p=preview

一个重要的事情是元素必须是可见的重点。因此,添加超时0

.directive('myFocus', function($timeout) { 
    return function(scope, element, attrs) { 
    attrs.$observe('myFocus', function() { 
     if (scope.$eval(attrs.myFocus)) { 
     // Element needs to be visible to focus 
     $timeout(function() { 
      element[0].focus(); 
     }) 
     } 
    }) 
    }; 
}); 

//html 
<input placeholder="Enter your teams name" my-focus="{{focus}}" ng-model="team_input" ng-show="myVar" class="team_input" ng-class="{redPlaceholder : newteamfocus, whitePlaceholder : !newteamfocus}" type="text" name="team_input" required/> 
相关问题