为什么“;& lt;输入类型=“number"/比;“;无法在angular 1.4.6的chrome中编辑
why " <input type="number" /> " cannot be edited in chrome with angular 1.4.6
我在我的项目中使用了angular-1.4.6。我写了一些代码链接如下:" HTML文件":
<!DOCTYPE html>
<html>
<head>
<title>退货向导</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/freshfresh_web/static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="/freshfresh_web/static/lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<link href="/freshfresh_web/static/lib/jquery-ui/jquery-ui.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="/freshfresh_return/static/src/css/return.css"></link>
<link rel="stylesheet" href="/freshfresh_return/static/src/css/angular-block-ui.css"></link>
<script type="text/javascript" src="/freshfresh_return/static/src/js/angular.js"></script>
<script type="text/javascript" src="/freshfresh_return/static/src/js/angular-block-ui.js"></script>
<script type="text/javascript" src="/freshfresh_return/static/src/js/angular-jsonrpc.js"></script>
<script type="text/javascript" src="/freshfresh_return/static/src/js/return.js"></script>
</head>
<body ng-app="freshfresh_return">
<div ng-controller="PickingCtrl" class="container">
<div class="pull-right">
<a href="/web/session/logout" class="btn btn-defualt" style="margin-top: 8px;">登出</a>
</div>
<div class="row">
<!-- left content -->
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">
<h3>扫描出库单</h3>
</div>
</div>
<p class="text-danger" id="error-msg" style="display: none">出库单号错误</p>
<div class="row">
<dir class="col-xs-12">
<input type="text" my-enter="get_picking_obj()" autofocus id="picking_id" ng-model='picking_id' placeholder="出库单号" class="form-control" />
</dir>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-11">
<form class="form-horizontal">
<div class="form-group" ng-repeat='field in res_obj.pick_obj'>
<label class="control-label">{{ field[0] }}</label>
<div>
<input type="text" disabled="disabled" value="{{ field[1] }}" />
</div>
</div>
</form>
</div>
</div>
</div>
<!-- left content -->
<!-- right-content -->
<div class="col-xs-9">
<table class="table table-striped table-hover" id="return_list">
<caption>包裹信息</caption>
<thead>
<tr>
<td><input type="checkbox" id="check_all" ng-model="check_all" /></td>
<td>产品</td>
<td>数量</td>
<td>计量单位</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="move in move_list">
<td><input type="checkbox" ng-checked="check_all" ng-model='move.selected' /></td>
<td>{{ move.product_name }}</td>
<td><input type="number" max="{{ move.qt_max }}" step="any" min="0" ng-model='move.quantity' /></td>
<td>{{ move.product_uos}}</td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-primary btn-large" ng-disabled="!(picking_id && res_obj)" ng-click="create_return()" value="同步" />
<p class="text-danger" id="req-success-msg" style="display: none">请求成功</p>
</div>
<!-- right-content -->
</div>
</div>
</body>
<script type="text/javascript" src="/freshfresh_web/static/lib/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/freshfresh_web/static/lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/freshfresh_web/static/lib/freshfresh/freshfresh.js?version=00004"></script>
<script type="text/javascript" src="/freshfresh_tms/static/src/js/datepickerCN.js"></script>
</html>和return.js代码，如下所示:
var utilsApp = angular.module('utils.fresh', []);
utilsApp.directive('autofocus', ['$timeout', function($timeout){
return {
'restrict': 'A',
link: function($scope, $element){
$timeout(function(){
$element[0].focus();
$element[0].onblur = function(){
this.focus();
}
});
}
}
}]);
utilsApp.directive('myEnter', function(){
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event){
if (event.which === 13){
element.val('')
scope.$apply(function(){
scope.$eval(attrs.myEnter)
});
event.preventDefault();
}
});
}
});
var freshApp = angular.module("freshfresh_return", ['utils.fresh', 'blockUI']);
freshApp.config(function(blockUIConfig) {
blockUIConfig.message = "加载中..."
});
freshApp.controller('PickingCtrl', ['$scope', '$http', 'blockUI', function($scope, $http, blockUI){
$scope.get_picking_obj = function(){
url = '/freshfresh_return/load_pick/' + $scope.picking_id;
blockUI.start();
$http.get(url).then(
function(response){
$scope.res_obj= response.data;
$scope.pick_obj = $scope.res_obj.pick_obj;
$scope.move_list = $scope.res_obj.product_return_moves;
$scope.pick_id = $scope.res_obj.pick_id;
for (var index = 0; index < $scope.move_list.length; index++){
$scope.move_list[index].qt_max = $scope.move_list[index].quantity;
}
blockUI.stop();
console.log("get picking obj success");
},
function(response){
blockUI.stop();
$('#error-msg').fadeIn('slow', function(){
$(this).delay(1000).fadeOut('slow');
});
console.log("get picking obj error");
});
};
$scope.create_return = function(){
if (!$scope.pick_id) {
console.log("error, not found the pick id.");
return false;
}
url = '/freshfresh_return/create_return/' + $scope.pick_id;
data = [];
for (var index = 0; index < $scope.move_list.length; index++){
if ($scope.move_list[index].selected){
data.push({
'move_id': $scope.move_list[index].move_id,
'quantity': $scope.move_list[index].quantity,
});
}
}
console.log(JSON.stringify(data));
blockUI.start();
$.ajax({
url: url,
data: JSON.stringify({'data': data}),
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: 'json',
traditional: true,
success: function(data){
blockUI.stop();
if (data.result.success){
console.log("请求成功");
$('#req-success-msg').fadeIn('slow', function(){
$(this).delay(1000).fadeOut('slow');
});
return
}
console.log("fails")
console.log(data)
alert(data)
},
failure: function(data){
blockUI.stop();
console.log(data)
}
});
};
}]);字段不可编辑。我试过set step="any"，但仍然不起作用。所以我试着写一个像这样的html演示:
<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript">
var testapp = angular.module('test', []);
var tc = testapp.controller('test', ['$scope', function($scope){
$scope.age = 14
$scope.move_list = [
{'product_name': '苹果', 'qt_max': 20, 'quantity': 20, 'product_uos': '件'},
{'product_name': '香蕉', 'qt_max': 30, 'quantity': 30, 'product_uos': '千克'},
];
$scope.data = [{'name': 'teacher', 'age': 12}, {'name': 'std', 'age': 14}];
console.log("hello");
}]);
</script>
</head>
<body ng-controller="test">
<form action="">
<div ng-repeat="d in data">
<input type="text" ng-model="d.name" />
<input type="number" max='50' ng-model="d.age" min='10'/>
</div>
<input type="submit" value="提交" />
</form>
<div class="col-xs-9">
<table class="table table-striped table-hover" id="return_list">
<caption>包裹信息</caption>
<thead>
<tr>
<td><input type="checkbox" id="check_all" ng-model="check_all" /></td>
<td>产品</td>
<td>数量</td>
<td>计量单位</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="move in move_list">
<td><input type="checkbox" ng-checked="check_all" ng-model='move.selected' /></td>
<td>{{ move.product_name }}</td>
<td><input type="number" max="{{ move.qt_max }}" step="any" min="0" ng-model='move.quantity' /></td>
<td>{{ move.product_uos}}</td>
</tr>
</tbody>
</table>
</body>
</html>，但演示工作良好。输入的数字可以编辑和验证。但是这个项目不能工作。代码是一样的。和angular都是1.4.6版本，所以我现在真的很困惑，是什么让这发生的?
对不起，我设置了一个自动聚焦指令，它总是聚焦第一个输入。所以其他元素无法得到关注。这不是角度的问题，只是我的错误。
相关文章：
- chrome.storage.sync.get未返回值-Angular服务
- Angular js$Interval怪异行为-Firefox Chrome
- Chrome扩展和Angular:我可以把Chrome.runtime.sendMessage变成一个同步函数吗
- 在Chrome和Safari中启动Angular JS应用程序的差异
- Chrome标签或书签滚动会影响angular应用程序
- 自定义Angular.js过滤器在IE8中不返回任何内容，在Chrome/FF中运行良好
- Angular$resource调用不被Access Control Allow使用Safari接受，而被Chrome接
- 为什么您需要在firefox中为onClick传递事件，而不使用Angular为chrome传递事件
- 使用标签页导航时Chrome Windows中的Angular ng-select错误
- Angular + requireJS:快速刷新页面会导致页面在 Chrome 中停止工作
- Angular.js带 rails:Chrome 中的元素只执行一个指令
- 在 chrome 中使用会话和本地存储时未加载 Angular JS 页面
- Angular.js 支持的 Chrome 版本
- 使用 Angular.js 作为 Chrome 扩展程序
- 带有 ANGULAR date.now(） 的占位符日期在 Chrome 中不起作用
- 移动Safari/Chrome上Angular应用程序的键盘严重滞后
- Angular不能在Chrome中工作
- Angular http post请求不发送任何数据.没有人甚至在chrome调试器
- 切换页面内Angular Chrome扩展的可见性
- Angular Chrome扩展中出现请求失败错误
