输入字段(type=“number”）一旦内容更改，就会失去angularjs的双向“BIND”属性
Input fields (type="number") loose their two-way 'BIND' property of angularjs once their content is changed.
我的问题很简单，但本质上是难以捉摸的。当您加载索引.php时（作为使用 xampp 的本地主机），您将看到一个简单的表单。现在这个表单上有多个元素，它仍在进行中，因此多个错误的可能性是合理的。但是，有一个错误真的很烦人。
问题：
更改截止日期元素时，以下输入的内容 盒子会因为与它绑定而发生变化。现在它不会 不管你更改截止日期多少次，因为每次 字段中的值将相应更改，这要归功于 angularjs。
当您更改输入字段的值时，BUG 会悄悄潜入。说 最初是 27，然后你把它改成 ，idk 说 10。*现在 如果更改截止日期，则更改的输入字段保持不变 * 即值为 10，而我希望它仍然改变。
此外，如果你们中的一个是angularjs编码员的神化， 他为我提供了一些提示，我只想说....."我很感激 那"。
索引.php
<!-- addService.html -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="ctrl-add-service.js"></script>
<script src="services.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="ctrl-add-service">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1 align="center">SERVICE FORM</h1>
<form role="form" ng-submit="createService()">
<div>
<label>Service Name</label>
<input type="text" class="form-control" placeholder="Enter service name here" ng-pattern="/^[a-zA-Z0-9_]*$/" required>
</div>
<div class="row">
<div class="col-md-6">
<label>Due Date</label>
<input type="date" class="form-control" ng-model='dueDate' ng-change="setFields()" required>
</div>
<div class="col-md-6">
<label>Task Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div style="margin-top: 20px;margin-bottom: 20px;" align="center">
<label>Period</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='12' ng-change="setFields()">Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='6' ng-change="setFields()">Semi-Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='4' ng-change="setFields()">Quarterly</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='1' ng-change="setFields()">Monthly</label>
</div>
<div align="center">
<div>
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[0]' ng-required='!fields[0]'></div>
<div style="display:inline-block;"><label>Feb</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[1]' ng-required='!fields[1]'></div>
<div style="display:inline-block;"><label>Mar</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[2]' ng-required='!fields[2]'></div>
<div style="display:inline-block;"><label>Apr</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[3]' ng-required='!fields[3]'></div>
</div>
<div style="display:inline-block;"><label>May</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[4]' ng-required='!fields[4]'></div>
<div style="display:inline-block;"><label>Jun</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[5]' ng-required='!fields[5]'></div>
<div style="display:inline-block;"><label>Jul</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[6]' ng-required='!fields[6]'></div>
<div style="display:inline-block;"><label>Aug</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[7]' ng-required='!fields[7]'></div>
<div>
<div style="display:inline-block;"><label>Sep</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[8]' ng-required='!fields[8]'></div>
<div style="display:inline-block;"><label>Oct</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[9]' ng-required='!fields[9]'></div>
<div style="display:inline-block;"><label>Nov</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[10]' ng-required='!fields[10]'></div>
<div style="display:inline-block;"><label>Dec</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[11]' ng-required='!fields[11]'></div>
</div>
</div>
<div align="center" style="margin-top: 20px;">
<button type="submit" class="btn btn-primary">Create</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
Ctrl-add-service.js （controller）
// ctrl-add-service.js Controller for the add service option in the nav bar of the home screen.
var mainApp = angular.module("mainApp",[]);
mainApp.controller('ctrl-add-service',function($scope, DueDateService){
$scope.value ='1';
$scope.setFields = function() {
$scope.date = DueDateService.date($scope.dueDate);
$scope.fields = DueDateService.fields( DueDateService.month($scope.dueDate), $scope.value); // first parameter passes month in int, second parameter passes period value in int.
};
});
服务.js（应用程序的服务）
// services.js services.js of the account direcotry of the project. It is used by the mainApp.
//DueDateService
mainApp.service('DueDateService', function(){
this.month = function(date) {
var temp = new Date(date);
month = temp.getMonth();
console.log(month+1+" is the month");
return (month+1);
};
this.date = function(date) {
var temp = new Date(date);
date = temp.getDate();
console.log(date+" is the date");
return (date);
};
this.fields = function(month,period) {
var lap = parseInt(period); // possible values of lap can be [12,6,4,1]
var iteration = 12/lap; // possible values of iteration can be [1,2,3,12]
var selectedFields = [true,true,true,true,true,true,true,true,true,true,true,true];
for (var i=1; i<=iteration; i++) {
if(month>12) {
month = month - 12;
}
selectedFields[month-1]= false;
month = month + lap;
}
return selectedFields;
};
});
我认为您需要将ng-value更改为ng-model并创建日期Array，如下所示：
ng-model='dates[0]'
ng-model='dates[1]'
ng-model='dates[2]'
...
您的控制器将是这样的：
var date = DueDateService.date($scope.dueDate);
$scope.dates = Array(12).fill(date);
请看这个 plunker：https://plnkr.co/edit/p8O14Y80hCWyNmxnYxbF
在以下几行中，你为什么要采用ng值，据我所知，你将不得不采用ng-model="date"，这将正常工作。
查看 ng 值用法https://docs.angularjs.org/api/ng/directive/ngValue
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-model="date" ng-disabled='fields[0]' ng-required='!fields[0]'></div>
相关文章：
- 如何在angularJS中编辑时，如果DB中的值为true，则设置复选框，如果值为false，则取消选中复选框
- AngularJS:我可以跳过函数参数回调吗
- AngularJS UI路由器不能像ng路由器那样工作
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何包含特定于每个视图angularjs的javascript文件
- AngularJS:ng之后，重复$scope值未按预期更新
- AngularJS-在JSON选择器中使用变量名
- Angularjs - 克隆的 html 正在失去$scope
- AngularJS:单选按钮在移动到下一个部分后失去价值
- 带有ui-router的AngularJS失去了SPA的概念
- 输入字段在嵌套的 AngularJS 重复中失去焦点
- AngularJs按钮失去作用域
- Angularjs x可编辑控件在完成或取消后会失去焦点
- Angularjs:在两个指令之间失去作用域
- AngularJS + CSS3变形时，我们失去了内容?无法向后滚动
- AngularJS:在promise之后的指令中失去作用域
- 在angularjs中，当调用请求的控制器失去作用域时，如何中止http请求
- AngularJS-HTML在ng重复中失去了模板替换的作用域
- 输入字段(type=“number”）一旦内容更改，就会失去angularjs的双向“BIND”属性
- AngularJS在JS表单插件渲染后失去了双向绑定
