Dynamically changing name of ng-show and scope variable - angularjs

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.

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

Editing inline not working with ng-repeat in 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=""/>

How to horizontally position elements for a pagination toolbar using Boostrap?

I'm working on an AngularJS project and in one of my views I have a table that will have pagination implemented on it. I want the controls for the pagination to be as follows:
Stacked horizontally, to have a Previous button, a text indicating the page of total of pages, and a Next button.
A select containing the number of elements per page desired to visualize on the table, and a text just saying "elements per page"
A text input to enter the number of page, and a Go to button that will load the indicated page.
All of these have to be sorted horizontally.
I defined this components like this in my view:
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="pagination pagination-sm">
<li >Anterior</li>
<li ><a>1 de 10 páginas</a></li>
<li>Siguiente</li>
</ul>
</div>
<div class="col-md-3">
<select class="form-control" ng-model="uc.defaultSelect" ng-options="n for n in uc.elementsPerPage" ></select>
<label>elementos por página</label>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Ir a página..." />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Ir</button>
</span>
</div>
</div>
</div>
</div>
But the end result I'm getting looks like this
The nav buttons look completely off line, the select is too big and it's pushing the label to a new line, the one that looks fine is the go to page input.
What kind of styling can I use with Bootstrap to achieve the look I desire?
In the end I had to give up on using the paginationstyle and changed to button-group, I removed some labels and ended up with this:
<div class="container">
<div class="row">
<div class="col-md-6 btn-group">
<button type="button" class="btn btn-default" ng-click="uc.previousPage()">Anterior</button>
<a class="btn btn-default disabled">1 de 10 páginas</a>
<button type="button" class="btn btn-default" ng-click="uc.nextPage()">Siguiente</button>
</div>
<div class="col-md-3">
<select class="form-control form-control-sm" ng-model="uc.defaultSelect" ng-options="n as (n + ' por página') for n in uc.elementsPerPage" ></select>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" ng-model="uc.page" class="form-control" placeholder="Ir a página..." />
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="uc.goToPage()">Ir</button>
</span>
</div>
</div>
</div>
</div>
Now I get this in my view:
I can just add some color to it if as necessary and I just got a pretty looking pagination toolbar.

How can i change the behavior of the enter key with angularjs

NOT DUPLICATED
I have a search with an input, a button and another button to toggle the advanced search:
<form role="form">
<div class="form-group ">
<input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
<div class="btn-group " >
<button type="button" ng-click="search()" class="btn btn-default">Submit</button>
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
<div id="subMenu" class="dropdown-menu advanced-search">
<div class="form-group">
<label for="usr">Find documents with...</label>
<input type="text" class="form-control" ng-model="adSearch.q1">
</div>
<div class="form-group">
<label for="usr">And</label>
<input type="text" class="form-control" ng-model="adSearch.q2">
</div>
<div class="form-group">
<label for="usr">Or</label>
<input type="text" class="form-control" ng-model="adSearch.q3">
</div>
<div class="form-group">
<label for="usr">Not</label>
<input type="text" class="form-control" ng-model="adSearch.q4">
</div>
</div>
</div>
</div>
</form>
When i press the enter key, the button of the advanced search is which takes the action.
I would like to know what can i do to the normal search (the fisrt button) takes the action when i press the enter key.
I do not want use jquery or javascript i need to do it with angularjs, i thought i could do it with just css but seems like i can not.
I can use this:
$scope.onKeyDownEnter = function($event){
if ($event.keyCode === 13) {
console.log("yeeeee");
}
};
But this also toggle the "subMenu", I do not know how to disable the behavior of that "subMenu" when i press the enter key.
Extra information:
Here i have the subMenu before press enter key
Here i have the subMenu after press enter key
I do not know why this code was the cause of this problem:
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
If you have this problem, just add type="button" like this:
<button type="button" class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
And all will work fine
As you have used autofocus in your search input box you can use jquery to get focus on your normal search button:
$(document).ready(function(){
$('#search-button').blur(function(){ $('#save-btn').focus(); });
});
Ps: please give ID to your button save-btn to get this working.
Did you try to apply focus ?
Like this :
$('#myButton').focus();

show and hide div from a repeat

I have a heading and comment to the heading on a repeat.
What I want to do it, keep all the inputs below the posts hidden at first and then, on clicking show input below button, show input for only that post. Basically a toggle but inside a repeat.
$scope.posts = [{"_id":"5","post":"second post","created_at":"2015-01-07T07:11:37.477Z"},{"_id":"542","post":"first post","created_at":"2015-01-07T07:11:30.922Z"}]
<div class="col-sm-12 margin-top-10" data-ng-repeat="post in posts track by $index">
<h4>{{post.post}}</h4>
<button type="button" class="pull-right btn btn-xs">
show input below
</button>
<h6 data-ng-repeat="comment in post.comments track by $index">{{comment}}</h6>
<form name="form.comment">
<input class="col-sm-12" type="text" name="commentText" ng-model="commentText" ng-keyup="$event.keyCode == 13 ? takeComment(post._id, commentText) : null" required>
</form>
<br>
<br>
<br>
</div>
$scope.posts = [{"_id":"5","post":"second
post","created_at":"2015-01-07T07:11:37.477Z"},{"_id":"542","post":"first
post","created_at":"2015-01-07T07:11:30.922Z"}]
<div class="col-sm-12 margin-top-10" data-ng-repeat=
"post in posts track by $index">
<h4>{{post.post}}</h4><button class="pull-right btn btn-xs" type=
"button" ng-click="post.show = !post.show">show input below</button> <--- add ng click
<h6 data-ng-repeat="comment in post.comments track by $index">
{{comment}}</h6>
<form id="form.comment" name="form.comment" ng-show="post.show"> <--- add ng show
<input class="col-sm-12" name="commentText" required="" type=
"text">
</form><br>
<br>
<br>
</div>

Resources