Develop Reference

When edit name, display the same name item on a dropdown menu in AngularJS

I have a simple AngularJS form that is connected to the database.
The form displays list of names and country of birth on an HTML table:
<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
<tr ng-repeat="name in Names">
<td>{{name.FullName}}</td>
<td>
<select ng-model="selectedCountryForEdit" ng-show="editMode">
<option ng-repeat="z in countryList" value="{{z.CountryCode}}">{{z.CountryName}}</option>
</select>
<span style="display: block;" ng-show="!editMode">{{areaItem.Countries}}</span>
</td>
<td><i class="fa fa-pencil" aria-hidden="true"></i></td>
</tr>
</table>
The table use the following JS/Angular code:
$http.get('/Home/GetNames')
.then(function (response) {
$scope.Names = response.data;
})
.catch(function (e) {
console.log("error", e);
throw e;
})
.finally(function () {
console.log("This finally block");
});
And the JS/Angular is calling a method on MVC to list data from the database.
I don't want to include the MVC code because it is working fine and my issue relies on something else:
If look at the html table, there is a pencil icon with each row that allows me to display a dropdown menu instead of the country.
What I am doing is filling the drop-down menu with list of countries from the database and I want the dropdown menu display the same country of the selected row/name.
I searched a lot and I could not find how to solve this issue. I am very new to Angular and JS and I hope you can advise on this.

You need to change ng-model of the select to the attribute in the Names array.
ex. if Names has att country so the ng-model instead selectedCountryForEdit, will be the same of the Names.
<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
<tr ng-repeat="name in Names">
<td>{{name.FullName}}</td>
<td>
<select ng-model="name.country" ng-show="editMode">
<option ng-repeat="z in countryList" value="{{z.CountryCode}}">{{z.CountryName}}</option>
</select>
<span style="display: block;" ng-show="!editMode">{{areaItem.Countries}}</span>
</td>
<td><i class="fa fa-pencil" aria-hidden="true"></i></td>
</tr>
</table>
also will recoment to change te select options ng-repeat to ng-options cause this one has better performance.
example:
<select ng-model="name.country" ng-show="editMode" ng-options="z.countryCode as z.CountryName for z in countryList">
<option value="">Select...</option>
</select>

material angular checkbox bind custom input checkbox

Im using this awesome angular material, now what im trying to do is when the angular checkbox 1 is click then all the input checkbox that has a class of "column_1" will be check, same as the angular checkbox 2 and 3, clicking in any of them will then checked the corresponding input checkbox that was bind for the clicked angular checkbox e.g if click checkbox2 then all the input checkbox that has a class of "column_2" will be check, click checkbox3 then all the input checkbox that has a class of "column_3" will be check. Any help, clues, ideas, recommendation and suggestion to achieve it?
here's my html
<div ng-app="j_app">
<div ng-controller="j_controller">
<md-checkbox ng-model="check">
</md-checkbox>
<table>
<thead>
<th><md-checkbox class="checkbox1"></md-checkbox></th>
<th><md-checkbox class="checkbox2"></md-checkbox></th>
<th><md-checkbox class="checkbox3"></md-checkbox></th>
</thead>
<tbody>
<tr class="row_1">
<td class="column_1"><md-checkbox></md-checkbox></td>
<td class="column_2"><md-checkbox></md-checkbox></td>
<td class="column_3"><md-checkbox></md-checkbox></td>
</tr>
<tr class="row_2">
<td class="column_1"><md-checkbox></md-checkbox></td>
<td class="column_2"><md-checkbox></md-checkbox></td>
<td class="column_3"><md-checkbox></md-checkbox></td>
</tr>
</table>
</div>
</div>
and my script (module and controller)
var app = angular.module('j_app', ['ngMaterial']);
app.controller('j_controller', function($scope) {
$scope.check = {
value1 : true,
value2 : false
};
});

Here is a plunker that looks to the behavior you want :
I basically dynamically created the checkboxes to have a better control on it.
<th ng-repeat="(column,columnindex) in [1,2,3]">
<md-checkbox ng-change="checkColumnCheckBoxes(columnindex,checkBoxesHeader[columnindex])"
ng-model="checkBoxesHeader[columnindex]" class="checkbox1">
</md-checkbox>
</th>
<tr class="row_{{$index}}" ng-repeat="(row,rowindex) in [1,2,3]">
<td class="column_{{$index}}"
ng-repeat="(column,columnindex) in [1,2,3]">
<md-checkbox ng-init="checkBoxes[rowindex][columnindex] = false"
ng-model="checkBoxes[rowindex][columnindex]">
</md-checkbox>
</td>
</tr>
You can replace "[1,2,3]" with any other counter.
My js "checkColumnCheckBoxes" function :
$scope.checkColumnCheckBoxes = function(index,value){
angular.forEach($scope.checkBoxes, function(checkBox,key){
$scope.checkBoxes[key][index] = value;
})
}
I'm pretty sure you will have to rework this to your "real" needs (as you don't need a table that display only checkboxes) but it could be a solid start. If you need some help to adapt it to your needs feel free to ask.
Hope it helped.
Since your HTML is pre-generated here is how it should look like :
<table>
<thead>
<th><md-checkbox ng-change="checkColumnCheckBoxes(0,checkBoxesHeader[0])" class="checkbox1" ng-model="checkBoxesHeader[0]"></md-checkbox></th>
<th><md-checkbox ng-change="checkColumnCheckBoxes(1,checkBoxesHeader[1])" class="checkbox2" ng-model="checkBoxesHeader[1]"></md-checkbox></th>
<th><md-checkbox ng-change="checkColumnCheckBoxes(2,checkBoxesHeader[2])" class="checkbox3" ng-model="checkBoxesHeader[2]"></md-checkbox></th>
<tbody>
<tr class="row_1">
<td class="column_1"><md-checkbox ng-init="checkBoxes[0][0] = false" ng-model="checkBoxes[0][0]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[1][0] = false" ng-model="checkBoxes[0][1]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[2][0] = false" ng-model="checkBoxes[0][2]"></md-checkbox></td>
</tr>
<tr class="row_2">
<td class="column_1"><md-checkbox ng-init="checkBoxes[0][1] = false" ng-model="checkBoxes[1][0]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[1][1] = false" ng-model="checkBoxes[1][1]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[2][1] = false" ng-model="checkBoxes[1][2]"></md-checkbox></td>
</tr>
</table>
I also updated the plunker to match the exemple.

Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery

Here is my html table that is used in the Asp.net MVC razor view
<table class="table-striped table-bordered">
<thead>
<tr>
<th class="col-md-2">
Id
</th>
<th class="col-md-4">
Description
</th>
<th class="col-md-3">
Quantity
</th>
<th class="col-md-3">
AssetType
</th>
</tr>
</thead>
<tbody>
#foreach (var i in Model)
{
<tr>
<td class="col-md-2">
#i.Id
</td>
<td class="col-md-4">
#i.Description
</td>
<td class="col-md-3">
#i.Count
</td>
<td class="col-md-3">
#i.AssetType
</td>
<td>
<a onclick="getId()">Edit</a>
</td>
</tr>
}
</tbody>
</table>
My Js Code
<script type="text/javascript">
var getId = function () {
//get current row
var currentRow = $(this).closest('tr');
// get the id from the current row. or is there any better way ?
}
</script>
Hi In the above code. all i want to do is when the user selects the edit link of the given row in the table. i want to extract id value of the selected row.
Could anyone please guide me in this one? I have seen articles that says how to get a given cell value from each row but didnt have any luck in finding articles that explains how to extract the data cell value from a given row.

You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it.
<td>
<a onclick="getId('#i.Id')">Edit</a>
</td>
function getId(id) {...}
or if you prefer you can use something like this:
<a onclick="getId(this)">Edit</a>
function getId(dom){
var id = $(dom).parent().find('.col-md-2').html();
}

You can put the id value to data-id attribute in the Edit link as below
<a data-id="#i.Id" class="edit-button" href="#">Edit</a>
Add the click event handler to the edit link, you can get the id value by using $(this).data('id')
<script type="text/javascript">
$('.edit-button').on('click', function (e) {
e.preventDefault();
alert($(this).data('id'));
});
</script>
Working fiddle: http://jsfiddle.net/ds4t6jur/

How to display the details about the selected option of a select box in Laravel using Blade?

I am a Laravel Newbie Some how I managed to display DB content in to a select box. What i wanted is that, i need to get data from another table based on the ID selected in the select box. My code is given below
Blade
<h2 class="comment-listings">Subscriber listings</h2><hr>
<table>
<thead>
<tr>
<th>Slelect a List:</th>
<th><select class="form-control input" name="list1s" id="list1s" >
<option selected disabled>Please select one option</option>
#foreach($list1s as $list1)
<option value="{{$list1->id}}">{{$list1->name}}</option>
#endforeach
</select>
</th>
</tr>
</thead>
</table>
<table>
<thead>
<tr>
<th>Device ID</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($subscribers as $subscriber)
<tr>
<td>{{{$subscriber->device_id}}}</td>
<td>{{$subscriber->list1->name}}</td>
<td>
{{Form::open(['route'=>['subscriber.update',$subscriber->id]])}}
{{Form::select('status',['approved'=>'Approved','blocked'=>'Blocked'],$subscriber->status,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
{{Form::close()}}
</td>
<td>{{HTML::linkRoute('subscriber.delete','Delete',$subscriber->id)}}</td>
</tr>
#endforeach
</tbody>
</table>
<script>
$('#list1s').on('change',function(e){
console.log(e);
var list_id = e.target.value;
$.get('/subscriber/get?list_id=' + list_id, function(data){
console.log(data);
})
})
</script>
{{$subscribers->links()}}
Controller for populating select box
public function listList()
{
$list1s = List1::all();
$this->layout->title = 'Subscriber Listings';
$this->layout->main = View::make('dash')->nest('content', 'subscribers.list', compact('list1s'));
$subscribers = Subscriber::orderBy('id', 'desc')->paginate(20);
View::share('subscribers', $subscribers);
}
This shows all the Lists and Subscribers.
Since i need to display subscribers of list selected in select box i have added a script at the bottom of the Blade and added other controller function at route to perform task based on the list_id passed from the script.
Route::get('/subscriber/get', function(){
$list_id = Input::get('list_id');
$subscribers = Subscriber::where('list1_id','=', $list_id)->get();
return Response::eloquent($subscribers);
});
But no changes are taking place, Where am I wrong?

I have Edited my code, and was successful.
Blade
<h2 class="comment-listings">Campaign listings</h2><hr>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Select a List:</th>
<th>
<select class="form-control input" name="list1s" id="list1s" onchange="displayVals(this.value)">
<option selected disabled>Please select a list</option>
#foreach($list1s as $list1)
<option value="{{$list1->id}}">{{$list1->name}}</option>
#endforeach
</select>
</th>
</tr>
</thead>
</table>
<div id="campaign">
</div>
<script>
function displayVals(data)
{
var val = data;
$.ajax({
type: "POST",
url: "get",
data: { id : val },
success:function(campaigns)
{
$("#campaign").html(campaigns);
}
});
}
</script>
Route
Route::any('/campaigns/get', [
'as' => '/campaigns/get',
'uses' => 'CampaignController#getCampaigns'
]);
Controller
public function getCampaigns()
{
$list1 = Input::get('id');
$campaigns = Campaign::orderBy('id', 'desc')
->where('list1_id','=', $list1)
->where('user_id','=',Auth::user()->id)
->paginate(10);
return View::make('campaigns.ajaxShow')->with('campaigns', $campaigns);
}
I have a separate blade now (ajaxShow) to load when option changed in select box.
<table>
<thead>
<tr>
<th>Campaign title</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($campaigns as $campaign)
<tr>
<td>{{{$campaign->template->title}}}</td>
<td>
{{Form::open(['route'=>['campaign.update',$campaign->id]])}}
{{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
{{Form::close()}}
</td>
<td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}</td>
</tr>
#endforeach
</tbody>
</table>
{{$campaigns->links()}}

There is no eloquent method implemented in Illuminate\Http\Response in Laravel 4 and above (I believe that method is only available in Laravel 3). But you can return a json response instead:
Route::get('/subscriber/list', function(){
$list_id = Input::get('list_id');
$subscribers = Subscriber::where('list1_id','=', $list_id)->get();
return Response::json($subscribers);
});

Display Hidden Tbody Content with OnClick/A Href Tag

I have various hidden tables that become displayed with onChange events. In the content of one of these tables, I would like to put a hyperlink that will take me back to the previously hidden table. So, to begin with, I have:
<table>
<tbody id="option11" style="display: none;">
<tr>
<td>
<p>
<select name="type" onChange="display(this,'option11a','option11b');">
<option>Please select:</option>
<option value= "option11a">Missed Deadline</option>
<option value= "option11b">Application Down</option>
</select>
</p>
</td>
</tr>
</table>
The onChange associated with this table is:
function display(obj,id11a,id11b)
{
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id11a).style.display = 'none';
document.getElementById(id11b).style.display = 'none';
if ( txt.match(id11a) )
{
document.getElementById(id11a).style.display = 'block';
}
if ( txt.match(id11b) )
{
document.getElementById(id11b).style.display = 'block';
}
}
If the user selects option11a, they are presented with:
<table>
<tbody id="option11a" style="display: none;">
<tr>
<tr>
<td><p>1. Identify missing work.</p></td>
<td><p>2. Contact management.</p></td>
</tr>
</tr>
And, if the user selects option11b, they are presented with:
<table>
<tbody id="option11b" style="display: none;">
<tr>
<tr>
<td><p>1. Contact management.</p></td>
<td><p>2. Refer to Missed Deadline instructions.</p></td>
</tr>
</tr>
So- what I'd like to do is this: Place a hyperlink of some sort in the "Refer to Missed Deadline instructions" that, when clicked, displays the table with tbody id option11a once again.
Let me know if I should better clarify. Greatly appreciate all help! Thanks.

You can do this easily with jquery's .last selector.
http://api.jquery.com/last-selector/