I have a problem where I need to disable my process button
to avoid several requests are sent to the server which in my case means
Duplicate records in stock. So I made the code below
but it is not working the button is not disabled you can
help me in this case thanks.
my html:
<div class="col-sm-2" style="padding-top: 20px;">
<button type="submit"
id="continue"
ng-disable="isDisabled"
ng-model="isDisabled"
ng-click="controller.save()"
class="btn btn-primary-default"
uib-tooltip="{{'buttons.save'| translate}}"
name="continue"
ng-focus= "controller.checkList()">
<span class="glyphicon glyphicon-ok"
aria-hidden="true">
</span>
<span>
{{'buttons.save'| translate}}
</span>
</button>
</div>
my angularjs:
$scope.isDisabled = false;
this.myfunction = function() {
... my code
$scope.isDisabled = false;
}
<button type="submit"
id="continue"
̶n̶g̶-̶d̶i̶s̶a̶b̶l̶e̶=̶"̶i̶s̶D̶i̶s̶a̶b̶l̶e̶d̶"̶
ng-disabled="isDisabled"
̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶i̶s̶D̶i̶s̶a̶b̶l̶e̶d̶"̶ ̶
ng-click="controller.save()"
class="btn btn-primary-default"
uib-tooltip="{{'buttons.save'| translate}}"
name="continue"
ng-focus= "controller.checkList()">
<span class="glyphicon glyphicon-ok"
aria-hidden="true">
</span>
<span>
{{'buttons.save'| translate}}
</span>
</button>
The name of the directive is ng-disabled, ends with a "ed".
For more information, see
AngularJS ng-disabled Directive API Reference
Related
I have retrieving the contents from database using $http.get api and displaying each record using ng-repeat. For each record i have a like and comment button. On clicking on comment button, i will show input box with send button previously it will be hidden(using ng-show). The problem is- on clicking any one of the record comment button,all other records input box with send button will be shown including clicked.
<div ng-repeat="dat in details">
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
</ul>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="mycomment()"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<div class="input-group" ng-show="comment1">
<input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
mycomment() method in script looks like-
$scope.comment1= false;
$scope.mycomment = function() {
$scope.comment1= true;
}
How can i change the name of ng-show-"comment1" dynamically(if I change, I have to change the name in script too) ?? is there any other way?
Try this:
<div ng-repeat="dat in details | filter : { product_name : textname} as results">
<hr/>
<p style="color:#4C97C8;" class="lead"><strong>{{dat.summary}}</strong></p>
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
<li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
<li><b>Description:</b><span> {{dat.description}}</span></li>
</ul>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="comment=true"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<div class="input-group" ng-show="comment">
<input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
Instead of ng-click="mycomment()" and ng-show="comment1": ng-click="comment=true" and ng-show="comment" accordingly. $scope.comment1 and $scope.mycomment are not needed.
I have list of data comes using ng-repeat and I bound as below.
<div class="col-xs-12" ng-repeat="rl_node in rl.nodes">
<div class="row">
<div class="col-xs-12 col-sm-3">
<span ng-hide="editRoleEntity">{{rl_node.id}}</span>
<input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
</div>
<div class="col-xs-12 col-sm-6">
<span ng-hide="editRoleEntity">{{rl_node.title}}</span>
<input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleName" ng-model="rl_node.title" placeholder=""/>
</div>
<div class="col-xs-12 col-sm-3 text-right">
<a class="pull-right btn btn-danger btn-xs" ng-click="editEnable(rl_node)" ng-if="!editRoleEntity"><span class="glyphicon glyphicon-trash"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = false" ng-if="editRoleEntity"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="save(rl_node)" ng-if="editRoleEntity" style="margin-right: 8px;"><span class="glyphicon glyphicon-ok"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = true"><span class="glyphicon glyphicon-pencil"></span></a>
</div>
</div>
</div>
I have four button Edit, Save, Cancel & Remove.
The Issue I'm facing is that once making editRoleEntity = true, it makes enable to all row's data
In Above image I tried to edit first row,
Please suggest how I can show textbox only for that row where I click edit icon.
Thanks
Not sure what is the code inside editEnable(rl_node) method; you can have something like this:
function editEnable(rl_node)
{
//depends on how you specify the scope variable - it could be $scope.property or this.property
$scope.selectedNodeId = rl_node.id;
}
and in html:
<span ng-hide="selectedNodeId !== rl_node.id">{{rl_node.id}}</span>
<input ng-show="selectedNodeId === rl_node.id" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
I am trying to add Datepicker in dropdown as follows and have set autoClose="outsideClick". However, when any month button is pressed it toggles the dropdown. How to solve this?
Html Code:
<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
<button class="btn btn-info" dropdown-toggle>Date Picker</button>
<div class="dropdown-menu datepicker" role="menu">
<datepicker show-weeks="false" ng-model="dt"></datepicker>
</div>
</div>
Plunker: http://plnkr.co/edit/lBn3Oo?p=preview
You need to manually prevent click event from bubbling, so it never reaches the topmost node (document) that closes dropdown:
<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
<button class="btn btn-info" dropdown-toggle>Date Picker</button>
<div class="dropdown-menu datepicker" role="menu" ng-click="$event.stopPropagation()">
<datepicker show-weeks="false" ng-model="dt"></datepicker>
</div>
</div>
Note, ng-click="$event.stopPropagation()" that does the trick.
Demo: http://plnkr.co/edit/pPwW83Ro0u0g4dVhyZaZ?p=info
I am using angular directive for date picker from UI bootstrap. I also use ng-repeat to add multiple rows. I have added date picker code in ng-repeat. I have displayed these date pickers in bootstrap modal. Also ng-repeat is work fine. But if I add multiple row and click on single calendar icon then all calendar popups of all date picker are shown. I don't know why should this happened. I use is-open="$parent.opened1" to perform click on calendar button. If I use only is-open="opened1" then calendar popoup will open only once (means: can not open after selecting any date). And if I use is-open="$parent.opened1" then after adding multiple rows all calendar popup is open.
Here is my code-
<div class="modal fade bs-example-modal-lg preventiveCarePop" id="preventiveProcess" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<form role="myForm" name="myForm">
<div class="modal-dialog" style="width: 35%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="margin: 0px;">
Preventive Care: <span ng-bind="patientObj.firstName"></span>
<span ng-bind="patientObj.lastName"></span><small
class="newSmall"><span> ({{patientObj.gender}}, <i
class="fa fa-mobile fa-lg"></i>:
{{patientObj.contact.mobileNumber}})
</span></small>
</h4>
</div>
<input type="hidden" ng-model="currentReminder" />
<div class="modal-body">
<div id="divActivites" name="divActivites">
<div class="form-group">
<div class="box-placeholder" ng-repeat="preventive in preventive.preventiveDetailsList">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<label for="exampleInputEmail1">Start Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.startOnDate"
is-open="$parent.opened2"
id="dos-{{$index}}"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened2')">
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-lg-4">
<label for="exampleInputEmail1">End Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.endOnDate"
id="doe-{{$index}}"
is-open="$parent.opened1"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened1')" >
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default" ng-click="addDummyPreventive(preventive.preventiveDetailsList,currCaseSheetObjForAddPrv.speciality,preventive.preventiveDetailsList.length)" style="float: right" title="Add new preventive"><i class="fa fa-plus-circle fa-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Here is my controller
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
I don't know what I use to work all fine.
Please share your idea's.
Thanks in advance.
Please see this demo and comments inside code can be helpful.
Html:
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS:
$scope.open = function($event, dt) {
$event.preventDefault();
$event.stopPropagation();
dt.opened = true;
};
There seems to be a problem converting ui.bootstrap.buttons to be used with ng-repeat. The ui.bootstrap.buttons example and documentation is here: http://angular-ui.github.io/bootstrap/
Bascially the default example works nicely: http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa?p=preview
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
But when it's converted the use ng-repeat, it breaks: http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V?p=preview
<div class="btn-group">
<label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>
Try
<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">
instead of
btn-radio="'{{test}}'"
On top of this ng-repeat is creating a new scope so you need to account for this as well. Here is a working plunk: http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM?p=preview
In the end after some testing I got it working using ng-class for initial selected value and own ng-click handler that changes the selected button
HTML-code for the buttons:
<div class="btn-group">
<button ng-repeat="(timelineIndex, timeline) in timelines" ng-click="selectTimeline(timeline)" ng-class="{active: timeline.name === selectedTimeline.name}" class="btn btn-primary">
{{timeline.name}}
</button>
</div>
in controller:
$scope.selectTimeline = function(activeTimeline) {
$scope.selectedTimeline = activeTimeline;
};