每当用户检查/取消选中一个复选框时,我正在设置var edit = true / false
。我有一个输入字段,该字段出现/消失在编辑的true/fals上。我想做的就是在出现文本字段时选择输入字段的文本值。
html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" select-text ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.name = "Johny";
}]);
myApp.directive('selectText', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
elem.bind('focus', function() {
$(elem).select();
});
$(elem).focus();
}
};
});
每当出现textfield的焦点事件时,我都会很难。
http://jsfiddle.net/pnnzb5sm/2/
我使用 $watch
做到了,以便每当edit
更新时,都会称其为
尝试这个
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.name = "Johny";
}]);
myApp.directive('selectText', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
elem.bind('focus', function() {
$(elem).select();
});
scope.$watch("edit",function(newValue,oldValue) {
//This gets called when data changes.
$(elem).select();
});
$(elem).focus();
}
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" select-text ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
</body>
</html>
使用此
if (!$window.getSelection().toString()) {
this.setSelectionRange(0, this.value.length)
}
演示
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.name = "Johny";
}]);
myApp.directive('selectText', function($window) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
elem.on('focus', function () {
if (!$window.getSelection().toString()) {
// Required for mobile Safari
this.setSelectionRange(0, this.value.length)
}
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input autofocus type="text" select-text ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>