AngularJS-成功输入集合条目上的显示按钮 [英] AngularJS - Display button on successful input collection entry
本文介绍了AngularJS-成功输入集合条目上的显示按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我似乎无法更新ng-if来更新输入项和输入控件整行的完成.我想每次在表单中输入新数据并在整个行都具有启用最后一个按钮(该行的最后一列)的条目的条件下输入ng-if(查看按钮).
I can't seem to update my ng-if to update on input entry and completion of entire row of input controls. I want to evaluate ng-if (look at button) each time I enter a new data in the form and under the condition that the entire row has entry to enable the last button (last column of row).
我应该使用ng-model，ng-change，还是不清楚如何重新评估ng-if.
Should I use ng-model, ng-change, I am unclear on how to re-evaluate the ng-if.
样本表格
期望的行为
我希望在用户输入该行的所有字段之后，按钮(+)出现在输入行的右侧(请参阅页面上的最后一个表，第三个表).
I want the buttons (+) to appear to the right of the input row (see last table, the third table on page) after user has entered all fields for that row.
该怎么办，因为目前ng-if尚未发生变化?
How do I do it, as currently no change happens to 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};
}
推荐答案
您可以在 ng-blur 中调用该方法来更改标志属性.当某个元素失去焦点时将执行该程序.
You can call the method in ng-blur to change a flag attribute. It will be executed when an element has lost focus.
在 ng-if 上放置标志属性条件.
On ng-if you put the flag attribute condition.
这篇关于AngularJS-成功输入集合条目上的显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
