如何根据需要更改按钮标签在angularjs？ [英] How to change button label in angularjs according to requirement?
问题描述
我要根据需要来改变同一按钮的标签在angularjs，同一个按钮可以进行更新，并提交。
上面演示是关于复制的模板。如果某些模板早已数据然后提交按钮的标签应该是更新外，其他明智的空模板标签应提交。
我不能使用下面的逻辑，因为它会改变与相同标签的所有按钮，但我想说明标签提交只为空，没有空的显示标签的更新。我将如何做呢？
＆LT;一类=BTN BTN-成功NG点击=updateOrder（$指数）＆GT; {{btnText}}＆LT; / A＆GT;
并添加一些逻辑控制器，将指定按钮上的文字：如果（的newitem）{
$ scope.btnText =提交;
}其他{
$ scope.btnText ='更新';
}
HTML
＆LT; DIV CLASS =COL-MD-12的风格=底：10px的＆GT;
＆LT; DIV CLASS =表单组NG重复=田间场＆GT;
＆LT; DIV CLASS =COL-MD-12＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT;标签类=COL-MD-12控制标签＆GT;＆字段1 LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-12＆GT;
＆LT;输入数据-NG-模式='field.field1级=选择选输入-MD格式控制SME-输入框/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT;标签类=COL-MD-12控制标签＆GT;＆字段2 LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-12＆GT;
＆LT;输入NG-模式='field.field2级=选择选输入-MD格式控制SME-输入框/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =COL-MD-12＆GT;
＆LT; DIV CLASS =COL-MD-3＆GT;
＆LT;一类=BTN BTN-成功NG点击=removeTemplate（$指数）＆GT;删除＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-3＆GT;
＆LT;一类=BTN BTN-成功NG点击=updateOrder（$指数）＆GT;提交＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-3的风格=顶：5像素＆GT;
＆LT;一类=BTN BTN-成功NG点击=cloneTemplate（）＆gt;添加＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
Angularjs
$ scope.fields = [
{
字段1：，
字段2：，
}
] //更新并获取发票明细
$ scope.cloneTemplate =功能（）{
VAR clone_template = {字段1：，字段2：};
$ scope.fields.push（clone_template）;
} $ scope.removeTemplate =功能（templateIndex）{
$ scope.fields.splice（templateIndex，1）;
} $ scope.updateOrder =功能（我）{
VAR updateOrder = {
字段1：$ scope.fields [I] .field1，
字段2：$ scope.fields [I] .field2，
}
警报（updateOrder.field1）;
$ http.post（config.server，updateOrder）
.success（功能（响应状态）{
的console.log（响应）;
}）
.error（功能（响应状态）{
的console.log（响应）;
}）
}
据我了解，虽然在添加数据你想显示提交按钮标签和放大器;显示更新按钮标签，同时更新记录。
因此，作为正常的做法你正在从数据库中这个值，所以我建议你在这个对象将与田在那里添加 ID 列。现在，对象会像 {ID：1，字段1：1，场2：2} 因此，如果元素的ID，这意味着它在数据库中一直存在。很明显，如果你没有 ID 田间记录意味着它已经从UI添加的。
所以整个逻辑将看 ID 你的对象的属性，如果你在记录有ID，然后它会显示更新为按钮标签，否则这将是提交
＆LT; DIV CLASS =COL-MD-3＆GT;
＆LT;一类=BTN BTN-成功NG点击=updateOrder（场）
NG-绑定=field.id'更新'：'提交'？＆GT;
提交
＆所述; / A＆GT;
＆LT; / DIV＆GT;
因此，对于使你的逻辑做工不错，你需要从数据库中再次获取列表，使您的用户界面保持一致。
I want to change the label of same button in angularjs according to requirement, same button can be for update and submit.
Above demo is about the replicate the template. If some template has already data then label of submit button should be Update, other-wise for empty template label should be Submit.
I can't use following logic because it will change all button with same label, but I want to show label Submit only for empty and no-empty to show label Update. How I will do that?
<a class="btn btn-success" ng-click="updateOrder($index)">{{btnText}}</a>
And add some logic to your controller, that will specify text for button:
if (newItem){
$scope.btnText = 'Submit';
}else{
$scope.btnText = 'Update';
}
HTML
<div class="col-md-12" style="bottom:10px" >
<div class="form-group" ng-repeat="field in fields">
<div class="col-md-12">
<div class="col-md-4">
<label class="col-md-12 control-label">Field1</label>
<div class="col-md-12">
<input data-ng-model='field.field1' class="chosen-select input-md form-control sme-input-box"/>
</div>
</div>
<div class="col-md-4">
<label class="col-md-12 control-label">Field2</label>
<div class="col-md-12">
<input ng-model='field.field2' class="chosen-select input-md form-control sme-input-box"/>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<a class="btn btn-success" ng-click="removeTemplate($index)">Remove</a>
</div>
<div class="col-md-3">
<a class="btn btn-success" ng-click="updateOrder($index)">Submit</a>
</div>
</div>
</div>
<div class="col-md-3" style="top:5px">
<a class="btn btn-success" ng-click="cloneTemplate()">Add</a>
</div>
</div>
Angularjs
$scope.fields=[
{
"field1": "",
"field2": "",
}
]
// update and get invoice details
$scope.cloneTemplate=function(){
var clone_template={ "field1": "", "field2": ""};
$scope.fields.push(clone_template);
}
$scope.removeTemplate= function(templateIndex){
$scope.fields.splice(templateIndex,1);
}
$scope.updateOrder=function(i){
var updateOrder={
"field1":$scope.fields[i].field1,
"field2":$scope.fields[i].field2,
}
alert(updateOrder.field1);
$http.post(config.server, updateOrder)
.success(function(response, status){
console.log(response);
})
.error(function(response, status){
console.log(response);
})
}
I understand that while while adding data you wanted to show Submit button label & show Update button label while updating record.
So as normal practice you are getting this value from the DB, so I'd suggest you to add id column in this object which will be there with fields. Now object will look like {id: 1, field1: '1', field2: 2} so if the element has id that means it has persisted in the database. And obviously if you don't have id in fields record means it has been added from UI.
So the whole logic will look at the id property of your object, if you have id in the record then it will show Update as button label otherwise it would be Submit
<div class="col-md-3">
<a class="btn btn-success" ng-click="updateOrder(field)"
ng-bind="field.id? 'Update': 'Submit'">
Submit
</a>
</div>
So for make your logic working good, you need to get the list again from the database to make your UI consistent.
这篇关于如何根据需要更改按钮标签在angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
