How to get hidden input value that was dynamically stored using AngularJS - angularjs

I'm trying to implement search method for "chat channels" that for every query it represents the compatible results from SQL table from the database.Each result can be distinguished by a unique ID that is also comes from the SQl table.I don't want to show the ID's so I put them in a hidden input for each result using ng-model.Also, for each, result the user have a possibility to subscribe to the channel (subscribe button) displayed in this result,so in order to save the subscription properly,I need to get the ID saved in the hidden input of the same result.
Here's what I tried:
<table class="table table-condensed">
<tr class="separating_line" ng-repeat="x in result">
<!-- ng-bind-html allows to bind a variable to the innerHTML part of the HTML element -->
<td>
<div class="col-md-8">
<h4><b style="color: gray;">{{ x.Name }}</b></h4>
<br><p> {{ x.Description }}</p>
</div>
<div class="col-md-2">
<small><label style="color: gray;">Subscribers </label>{{ x.Subscribersnum }}</label></small><br>
<input id="hiddenId" hidden="hide" ng-model="idval=x.ChanID" />
<button ng-click="subscribechannel()" class="btn btn-primary">Subscribe</button>
</div>
</td>
</tr>
</table>
In the controller I send it in the following way to convenient Servlet:
$http.get("http://localhost:8080/ExampleServletv3/subscribeservlet",{
params: {
subidval: $scope.idval
}
})
But when debugging the value that I get in the servlet is null.
How can I solve this? Any ideas?
Thanks

You don't need any hidden field to do what you want. All you need is to pass a parameter to your function:
<tr class="separating_line" ng-repeat="x in result">
...
<button ng-click="subscribechannel(x)" class="btn btn-primary">Subscribe</button>

Related

Display the value only if the current value in the loop is not same as the previous value in jsp using ng- repeat

I am using ng-repeat in my jsp to loop and display the values.if i have the value more then one time in the list i need to display only once.
Display the value only if the current value in the loop is not same as the previous value in jsp using ng- repeat
please find my code:
<td>
// obj.vm is name. name should be displayed only if it is diferrent then the previous name. otherwise it should be blank
<div obj.vm> </div>
</td>
// obj.dm is value. all the values should be displayed
<td> <div obj.dm> </div>
</td>
</tr>
<tr ng-repeat="obj in selItem.surveyRefData">
<td nowrap> // need to display ob.vm only if the current value is not same as previous value
<div style="float: left;" class="form-actions" obj.vm">
</div>
</td>
<td>
<div style="float: left;" class="form-actions"
ng-bind-html="(!validSeriesIdReqPending ?(obj.dm | seriesText):'')">
</div>
<br/>
<br/>
<tr ng-repeat="obj in selItem.surveyRefData|unique: obj">
<td> // obj.vm is name. name should be displayed only if it is diferrent then the previous name. otherwise it should be blank
<div obj.vm>
</div> </td> // obj.dm is value. all the values should be displayed
<td>
<div obj.dm> </div>
</td>
</tr>
The ideal solution is to preprocess the data and group it by the vm attribute, so you would have some structure like this:
name1
value1
value2
value3
name2
value4
value5
name3
value5
...
Then you would have a nested ng-repeat that loops over the values within each name. If, for some reason, you can't preprocess the data, you can refer to the previous item in your ng-repeat using the $index variable. Here is a simple example:
<tr ng-repeat="obj in selItem.surveyRefData">
<td>{{obj.vm !== selItem.surveyRefData[$index-1].vm ? obj.vm : ''}}</td>
<td>{{obj.dm}}</td>
</tr>
Keep in mind that this will only work if your data is ordered based on the vm attribute... if you had name1 -> name1 -> name2 -> name1, for example, you would see name1 twice in your output table.
Here is a simple example plunker: https://plnkr.co/edit/r5yxYk4Rr7mXaBeqoJNs

ng-repeat directive doesn't work on <tr> / table row element

I am trying to use the ng-repeat directive to create table rows with a list of campaign names.
However, I am not able to get any results, though I am still able to see one of the children of the array displaying correctly.
Here is my view code:
<div class="modal-body">
<p>{{$ctrl.contact.Campaigns[0].CampaignName}}</p>
<tr ng-repeat="campaign in $ctrl.contact.Campaigns">
<label>
{{campaign.CampaignName}}
</label>
</tr>
</div>
I can successfully see the paragraph element above and it shows the expected data, but not the table row elements.
I don't see any errors in the browser console.
How can I make the ng-repeat directive work in the code above?
The problem was that the <tr> / table row element didn't have a parent <table> element containing it.
This is solved by simply adding in table tags around the orphaned <tr> element:
<div class="modal-body">
<table>
<tr ng-repeat="campaign in $ctrl.contact.Campaigns">
<label>
{{campaign.CampaignName}}
</label>
</tr>
</table>
</div>

Prevent angular from sorting list item alphabetically in real time

I am trying to fix a bug with an angularjs list.
When an item in the list is edited, the record is sorted alphetically in real time and it jumps to a new position in the list.
This is proving problematic as when someone tries to edit a record, "ABC" for example, if they put a "Z" in front of it it jumps to the last page on the list.
The text input value is bound directly to the model, which I suspect is the issue, as the data-ng-repeat directive ensures that the data is sorted alphabetically.
As such I tried changing the data-ng-model binding to data-ng-bind, as it is my understanding that if the input value is changed, ng-model updates the model while ng-bind doesn't.
I would greatly appreciate any advice.
HTML:
<form name="companies" class="clearfix" novalidate data-ng- hide="loadingIcon">
<table>
<tbody>
<tr data-ng-repeat="company in data | orderBy: 'NAME' | siftPage: startIndex: endIndex">
<td width="60%">
<span data-ng-hide="edit"> {{ company.NAME }} </span>
<div class="form-field col-sm-9" data-ng-show="edit">
<input type="text" data-ng-bind="company.NAME" />
</div>
</td>
<td>
<a class="icon edit" data-ng-click="edit = !edit; changed = edit ? edited(company) : changed(company);" href="#"></a>
</td>
<td>
<a class="icon delete" data-ng-click="removeCompany(company)" href="#"></a>
</td>
</tr>
</tbody>
</table>
I'm new to angular so please forgive me if I haven't included enough information. I will update update with any further information as requested.
I believe it is the ng-repeat with the orderBy: 'Name' clause that is the actual issue. It will make sure that the order is maintained even after an edit.
If you want to order initially before edits, copy the name as initialName onto each of your json objects and set the orderBy to 'initialName'. Since you wont be updating the initialName on an edit it wont update via the order by.
If you create the copy as a function to create the initialNames, you could call it through a button to re-sort the data.

why table header click event not working to firing?

I am trying to sort my column using click event of column header.I am using angular js framework using filter orderBy .I saw a example which is working fine which is sort the column on click of header of column
http://plnkr.co/edit/aGAI6EmCwGyPKmFZAFb8?p=preview
I make a simple demo using above example try to sort my column on header click
.When I click on header it gives me alert of index , reverse parameter along with image is also change but the column is not sorted
can we sort column using header click as shown in above example
here is my code
http://plnkr.co/edit/r22YnCILVSuWPrMnTnv2?p=preview
please click on any column header and see the alerts but column is not sorted why ?
Please increase the output window screen of plunker to see the outputs .
<header-row ng-transclude class="row rowclassheaderClass" style="padding-bottom:1%">
<div class="col brd text-center brdleft_right gray-20 collapse-sm columnCss"
ng-repeat="d in invoice_column_name | filter:{checked: true}">
<sort-header label="{{d.label|uppercase}}" index="{{d.index}}"
sort-exp="setSort(idx, reverse)"></sort-header>
</div>
<div class="col col-10 text-center brd gray-20" ng-click="openSettingPopover($event)">
<button class="button-icon icon ion-ios-more fntandbg"></button>
</div>
</header-row>
Any update..?
It seems like you are trying to re-invent the wheel. There is a sortBy built directly into angular.
Take a look at
docs.angularjs.org/api/ng/filter/orderBy
In particular the first example for a basic overview and then the second one (I have outlined in the code sample below) it does exactly what you are trying to achieve but in much less code.
View Plunkr
<body ng-app="orderByExample">
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>Name
(^)</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>

AngularJS - How to access a binding value within ng-switch

Within a ng-repeat I have a ng-switch conditional. I want the value of the ng-switch argument to be a binding. However the curly-bracket binding doesn't seem to be converted into the expected generated value. I'm aware that ng-switch creates a new scope, and that is surely causing the problem. I know about a 'dot' work-around but as the values here are coming from a service via a controller query, I can't figure out how to implement it in this situation.
html
<tr ng-repeat="user in users">
<td ng-switch on="editState"><p ng-switch-when="noEdit">{{user.username}}</p><input type="text" value="{{user.username}}" ng-switch-when="{{user.username}}"></td>
</tr>
controller.js
$scope.users = Users.query();
-edit-
this is the function that triggers the switch
$scope.editUser = function(usernameEdit) {
$scope.editState = usernameEdit;
};
A single $scope.editState won't work if you want to be able to edit multiple users at the same time. I suggest putting an edit property on each user, and use that property to control the ng-switch:
<tr ng-repeat="user in users">
<td ng-switch on="user.edit">
<span ng-switch-when="true">
<input type="text" value="{{user.username}}">
done
</span>
<p ng-switch-default>
edit {{user.username}}
</p>
</td>
</tr>
Fiddle

Resources