Trying to get my head around ng-repeat and sort! I have a list of JSON objects as follows:
Current user list:
[{user: abc, name: ABC},{user: xzy, name: XZY}]
I've got an ng-repeat that iterates the list to display the user details. This all works, however, I want the first item in the list to be that of the logged in user. In this case user xzy is the logged in user so that person should display first.
Any help is appreciated.
J
Use a custom orderBy function and put the current user first, ex:
<div ng-repeat="user in users | orderBy: currentUser"></div>
And the function
$scope.currentUser = function(user) {
if (user.user == $scope.currentUserName) return 0
else return 1;
}
Where $scope.currentUserName holds the user name of the currently logged in user.
Related
I want to show array of data based on their id. I have two tables.
first one is "languages"
Other is "user"
each user has one or more languages.
so I have stored languages id in user table in array form.
now I want to show languages in- show user detail page-.
I used the following controller:
``` public function show()
{
$user=auth()->user()->Consult;
$languagess=Lang::all();
$selected = explode(",", $con->languages);
$collection = [];
foreach($selected as $r){
$collection[] = DB::table('language')->where('id', $r['languages'])->first();
}
dd($collection);
return View('consultacy.showPro',compact('user','languages'));
}```
I used following view :
<span >{{ $languagess['name']}}</span>
#endforeach
the error :
Illegal string offset 'languages'
Any tutorial or method to do this
I was trying to find the AngularJS select with ng-options or Typeahead expression syntax but I couldn't find the whole thing in one place, so I gather information from here and there and this is what I came up with:
Expression syntax (This is the full syntax, most of it are optional):
(ObjectForModel) as (stringRepresentation for the UI) for (OneObjectFromList) in (ListOfObjects) | (Filter1) | (Filter2) ...
Example: Lets say we have a list of Students:
var StudentList = [{firstName: "Jhon",lastName:"Smith" id:1},{firstName: "Clint",lastName:"Eastwood" id:2} ];
Lets say that we wanna use this list in a typeAhead input but:
1. We want our popup drop down to display: "first name - last name" but when a user select an item we want the whole item from the list to be populate in the ng-model.
2. We want to filter the select to show only 5 elements
3. We want the pop up drop down list to display only what is relevant base on the user input.
So this is how it looks like:
uib-typeahead="student as (student.firstName +' - ' + student.lastName) for student in studentList | filter:$viewValue | limitTo:5"
If you guys have something more to add please do, I know I could have use it...
You can also change the template ( for example displaying a field in a particular way, and on click set the input with another one )
in the html file :
<script type="text/ng-template" id="deterFormACTemplate.html">
<a ng-bind-html="match.model.displayed | unsafe"></a>
</script>
<input typeahead-template-url="deterFormACTemplate.html"
uib-typeahead="item as item.field for item in autocomplete(...)"
typeahead-on-select="mymodel=$model.field;"
typeahead-wait-ms="500" />
in the controller
$scope.autocomplete = function ( ){
return [ {'field':'..', "displayed":"..."},{'field':'..', "displayed":"..."}, .. ];
}
I have a simple select list that is based on a $firebaseArray(). I dont have a problem getting the values into the drop. Just the selected value.
<select class="form-control" ng-model="vm.selectedRole"
ng-options="role.name for role in vm.allRoles">
</select>
The $firebaseArray looks like this
In my controller the function that initializes the form with the select is
Get.getParentUrl('roles').$loaded()
.then(function (data) {
vm.allRoles = Get.getParentUrl('roles');
vm.selectedRole = entity.role.name;
})
And this populates the select but it does not set the selected value for it on vm.selectedRole. Note that entity is the value that is being passed , so if i write a
console.log(entity.role.name);
The returned value is the selected value that is being passed. So if the user selects a user with a role "Supervisor" and i write a console.log(vm.selectedRole) inside the .then(function(data){ the value returned is "Supervisor"
However the html displays a "?"
I got it working by adding the vm.selectedRole like so
vm.selectedRole = { name: entity.role.name };
Which works i guess. Syntax seems a bit crappy though
https://docs.angularjs.org/api/ng/directive/ngOptions
I'm attempting to learn angular. I've been using the default hr schema from Oracle and I'm using a web API to bring back the employee collection and the department collection.
I'm rendering an HTML table to display the employee info. For the department column I have a function that takes the emp.department_id, does a lookup on the department collection and returns the department name.
I have headers on the table that when clicked sort the table in ascending or descending.
However I'm struggling with the sort on the department name column since department name is not actually a field on the employee collection. I tried to sort by the function I was using to get the value but I'm not quite getting it.
In my controller I have the following function to get the department name:
$scope.getDeptName = function(id){
for (var i=0; < model.departments.length; i++{
if(model.departments[i].department_id == id){
return model.departments[i].department_name;
}}}
My table headers:
<tr><th><a href="#" ng-click=orderByField='last_name'; reverseSort =! reverseSort>Name</a><th>
<th><a href="#" ng-click=orderByField='getDeptName(department_id)'; reverseSort =! reverseSort>Dept Name</a><th></tr>
<tr> ng-repeat="emp in model.employees |orderBy:orderByField:reverseSort">
The sort by Department Name is not working, I'm unsure how to sort by the function.
The orderByField must be set to the function allowing to get the name of the employee. Not to a string containing a call to this function. The correct way is thus
ng-click="orderByField = getDeptNameFromEmployee"
which, in JS, is equivalent to
$scope.orderByField = $scope.getDeptNameFromEmployee;
But beware: getDeptNameFromEmployee must take an employee object as parameter, and not an employee ID, for this to work. So it should look like
$scope.getDeptNameFromEmployee = function(employee) {
return $scope.getDeptName(employee.deptId);
};
Take the quotes off the function call:
<a href="#" ng-click=orderByField='getDeptName(department_id)'; reverseSort =! reverseSort>Dept Name</a>
should be:
Dept Name
I have a list of users (array of objects)
I need the selected user in $scope.owner for use elsewhere.
I need to pre-select a user by Id and have $scope.owner update with correct object values (e.g. user.Email, user.Address).
$scope.item.UserId needs to change based on the selected user.
This is what I have so far:
<select
ng-model="owner"
ng-change="item.UserId=owner.Id"
ng-options="user as user.Company + ' - ' + user.FirstName + ' ' + user.LastName for user in users track by user.Id">
</select>
Currently 1. and 3. work, but when I pre select using:
$scope.owner = { Id: 1 };
Then I obviously don't all the values from users such as user.Email.
Anyone got ideas or advice?
Thanks, Lex
If you use $scope.owner = {Id:1} even it has same Id it is different instance then one created when iterating in ng-options.
When you get your list of users why not just set
$scope.owner = $scope.users[0]
// or if you need to get by id just use
$scope.owner = $scope.users.filter(...)[0]
Here is sample plunker.
http://plnkr.co/edit/5VZbdmBmtaDpkeLYQwft?p=preview