Editing inline not working with ng-repeat in AngularJs - angularjs

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=""/>

Related

Disable button in angularjs to ensure process termination without double request

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

How to move angularjs html filter into controller?

I would like to move the filter out of the HTML and inside a controller. Any suggestions on how the function would look?
<div class="dropdown">
<button class="btn btn-small btn-primary" type="button" data-toggle="dropdown">Filter
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-outer">
<div class="dropdown-inner">
<div class="inner-addon right-addon dropdown-padding">
<i ng-click="filteredItem.name = ''" class="glyph glyphicon glyphicon-remove-circle"></i>
<input class="form-control" data-keepOpenOnClick type="text" ng-trim="true" ng-model="filteredItem.name" placeholder="Filter by File Name"/>
</div>
<div class="inner-addon right-addon dropdown-padding">
<i ng-click="filteredItem.prettyName = ''" class="glyph glyphicon glyphicon-remove-circle"></i>
<input class="form-control" data-keepOpenOnClick type="text" ng-trim="true" ng-model="filteredItem.prettyName" placeholder="Filter by Name"/>
</div>
<div class="inner-addon right-addon dropdown-padding">
<i ng-click="filteredItem.type = ''" class="glyph glyphicon glyphicon-remove-circle"></i>
<input class="form-control" data-keepOpenOnClick type="text" ng-trim="true" ng-model="filteredItem.type" placeholder="Filter by Type" typeahead="type.pretty_name for type in widgetType" required />
</div>
<div class="dropdown-padding">
<button ng-click="resetfilteredItem()" class="btn btn-small btn-primary" type="button" data-toggle="dropdown">Reset
</div>
</div>
</ul>
</div>
<div class="list-group" ng-repeat="filter in filteredItems = (ideas | filter: (!!filteredItem.name || !!filteredItem.prettyName || !!filteredItem.type || undefined) && filteredItem)">
<div class="list-group-item widgets-group-item" ng-mouseover="showname=true" ng-mouseleave="showname=false" dnd-draggable="dragToWidgetConfig(widget)" dnd-effect-allowed="copy">
{{filter.prettyName}}
</div>
</div>
I was able to find a solution. Simply adding this scope to the controller
$scope.filteredItems = {};
and updating the HTML solve my problem.
<div class="list-group" ng-repeat="item in filteredItems = (items | filter: filteredItems)">
</div>

Dynamically changing name of ng-show and scope variable

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.

AngularJS submit button active when all input have a data

I have form with input fields, radio buttons, select boxes. Need submit button make active after when all fields have a data.
example my fields and button.
<div class="form-group" ng-class="{ 'has-error': myForm.birth.$touched && myForm.birth.$invalid }">
<label class="col-sm-3 control-label">{{getWord('Dob')}}<sup>*</sup></label>
<div class="col-sm-6">
<p class="input-group">
<input type="text" placeholder="1988-12-12" class="form-control" name="birth"
uib-datepicker-popup="{{format}}" ng-model="patient.DOB"
data-placeholder=""
is-open="isOpened" datepicker-options="dpOptions"
close-text="Close" alt-input-formats="altInputFormats" required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalender()"><i
class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<p ng-show="myForm.birth.$error.required" style="color:red" ng-if="myForm.birth.$touched">Date of birth is
required.</p>
</p>
</div>
</div>
and code button
<div class="form-group">
<div class="text-center">
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
<button class="btn btn-labeled btn-danger" type="button">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>
{{getWord('clearbutton')}}
</button>
</div>
</div>
and need same for clear button, clear all input fields.
Just modify your button code as:
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()"
ng-disabled="myForm.$invalid">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
I added ng-disabled="myForm.$invalid" which will disable the button when the any of the input field is not valid.

UI bootstrap date picker with ng-repeate is not working

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;
};

Resources