AngularJS-成功输入集合条目上的显示按钮
我似乎无法更新ng-if来更新输入项和输入控件整行的完成。我想每次在表单中输入新数据并在整个行都具有启用最后一个按钮（该行的最后一列）的条目的条件下输入ng-if（查看按钮）。
我应该使用ng-model，ng-change，还是不清楚如何重新评估ng-if。
样本表格
期望的行为
我希望在用户输入该行的所有字段之后，按钮（+）出现在输入行的右侧（请参阅页面的最后一个表，第三个表）。
该怎么办，因为目前ng-if尚未发生变化？
<tbody>
<tr ng-repeat="event in [0,1,2,3,4,5]">
<td>
{{event}}
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.eventtitle{{event}}.done" config="eventtitle{{event}}" webix-ui="eventtitle{{event}}" width="250" height="30" type="text" id="eventtitle{{event}}" name="eventtitle[{{event}}]"></div>
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.owner{{event}}.done" ng-model="ctrl.risk.owner[event]" config="owner{{event}}" webix-ui="owner{{event}}" id="owner{{event}}" width="250" height="30" name="owner[{{event}}]" options="users" type="richselect" />
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.actualdate{{event}}.done" config="actualdate{{event}}" webix-ui="actualdate{{event}}" id="actualdate{{event}}" width="200" height="30" name="actualate[{{event}}]" value="today" type="datepicker" />
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.scheduledate{{event}}.done" config="scheduledate{{event}}" webix-ui="scheduledate{{event}}" id="scheduledate{{event}}" width="200" height="30" name="scheduledate[{{event}}]" value="today" type="datepicker" />
</td>
<td>
H 5-5
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.likelihood{{event}}.done" config="likelihood{{event}}" webix-ui="likelihood{{event}}" width="30" height="30" type="text" id="likelihood{{event}}" name="likelihood[{{event}}]"></div>
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.technical{{event}}.done" config="technical{{event}}" webix-ui="technical{{event}}" width="30" height="30" type="text" id="technical{{event}}" name="technical[{{event}}]"></div>
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.schedule{{event}}.done" config="schedule{{event}}" webix-ui="schedule{{event}}" width="30" height="30" type="text" id="schedule{{event}}" name="schedule[{{event}}]"></div>
</td>
<td>
<div class="evt{{event}}" enabled="{{ctrl.enabled(event)}}" ng-show="ctrl.config.cost{{event}}.done" config="cost{{event}}" webix-ui="cost{{event}}" width="30" height="30" type="text" id="cost{{event}}" name="cost[{{event}}]"></div>
</td>
<td>
<button ng-if="ctrl.evtValid[event]" ng-model="ctrl.evtValid[event]" ng-click="ctrl.enable(event+1)">+</button>
</td>
</tr>
</tbody>
特定输入行的有效方法
commonFunctions.evtValid = function(evt){
return (
document.querySelector("#eventtitle"+evt+ " input[type=text]") != null
&& document.querySelector("#eventtitle"+evt+ " input[type=text]").value != ''
&& document.querySelector("#owner"+evt+ " div.webix_el_box div.webix_inp_static") != null
&& document.querySelector("#owner"+evt+ " div.webix_el_box div.webix_inp_static").outerText != ''
&& document.querySelector("#actualdate"+evt + " div.webix_el_box div.webix_inp_static") != null
&& document.querySelector("#actualdate"+evt + " div.webix_el_box div.webix_inp_static").innerHTML != ''
&& document.querySelector("#scheduledate"+evt+ " div.webix_el_box div.webix_inp_static") != null
&& document.querySelector("#scheduledate"+evt+ " div.webix_el_box div.webix_inp_static").innerHTML != ''
&& document.querySelector("#likelihood"+evt+ " input[type=text]") != null
&& !commonFunctions.invalidLevel(document.querySelector("#likelihood"+evt+ " input[type=text]").value)
&& document.querySelector("#technical"+evt+ " input[type=text]") != null
&& !commonFunctions.invalidLevel(document.querySelector("#technical"+evt+ " input[type=text]").value)
&& document.querySelector("#schedule"+evt+ " input[type=text]") != null
&& !commonFunctions.invalidLevel(document.querySelector("#schedule"+evt+ " input[type=text]").value)
&& document.querySelector("#cost"+evt+ " input[type=text]") != null
&& !commonFunctions.invalidLevel(document.querySelector("#cost"+evt+ " input[type=text]").value) );
}
指令配置代码
angular.module('Risk').directive('config', ['$timeout', ConfigElement]);
function ConfigElement($timeout){
var directive = {
restrict: 'A',
link: linkFn,
controller: ConfigController
}
function linkFn(scope, elem, attrs){
var attr = attrs.config;
var type = attrs.type;
var width = attrs.width;
var height = attrs.height;
var evt;
if (attrs.hasOwnProperty('class'))
{
var evt = parseInt(attrs.class[3]);
if (scope.ctrl.evtValid.hasOwnProperty(evt))
scope.ctrl.evtValid[evt] = false;
}
var disabled = false;
if (attrs.hasOwnProperty('enabled') && attrs.enabled == 'false')
disabled = true;
var maxlength = attrs.hasOwnProperty('maxlength')? attrs.maxlength: null;
var options = attrs.hasOwnProperty('options')? attrs.options : null;
var view;
if (type == "level")
view = "text";
else
view = type;
scope.ctrl.DOMops.setValidationServiceObj(scope.ctrl.ValidationService);
scope.ctrl.DOMops.setValue('risk', scope.ctrl.risk);
scope.ctrl.DOMops.setValue('riskMatrix', scope.ctrl.riskMatrix);
scope.ctrl.DOMops.setValue('risklevels', scope.ctrl.risklevels);
scope.ctrl.ValidationService.setValue('risk', scope.ctrl.risk);
scope.ctrl.ValidationService.setDOMobj(scope.ctrl.DOMops);
var config =
{
view: view,
responsive: true,
width: width,
height: height,
disabled: disabled
};
if (view == "text" || view == "textarea")
{
config.on = {
"onTimedKeyPress": function(){
var obj = this.eventSource || this;
code = this.getValue();
scope.ctrl.ValidationService.getTextValueAndValidate(code, scope.ctrl, obj, attr);
if (type == "level")
scope.ctrl.DOMops.assignRiskLevel(obj);
if (evt != null)
scope.ctrl.evtValid[evt] = scope.ctrl.ValidationService.evtValid(evt);
}
}
config.value = scope.ctrl.risk[attr];
}
else if (view == "richselect")
{
config.value = scope.ctrl.risk[attr];
config.options = scope.ctrl[options];
config.on = {
"onChange": function(){
var obj = this.eventSource || this;
scope.ctrl.getItemValueAndValidate(obj, scope.ctrl, attr);
config.value = obj.getValue();
if (evt != null)
scope.ctrl.evtValid[evt] = scope.ctrl.ValidationService.evtValid(evt);
}
}
}
else if (view = "datepicker")
{
config.timepicker = false;
//multiselect: true,
config.suggest = {
type:"calendar",
body:{
minDate:(new Date()).setDate(new Date())
}
}
config.on = {
"onChange": function(){
var obj = this.eventSource || this;
scope.ctrl.getDateValueAndValidate(obj, scope.ctrl, attr);
config.value = obj.getValue();
if (evt != null)
scope.ctrl.evtValid[evt] = scope.ctrl.ValidationService.evtValid(evt);
}
}
}
if (maxlength)
config.attributes = {maxlength : maxlength};
config.done = true;
scope.ctrl.config[attr] = config;
}
return directive;
}
function ConfigController($scope, $element, $attrs){
$scope.ctrl.config[$attrs.config] = {done: false};
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？