I'm working in VueJS and i have the following code
<li #click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li>
so what i try to accomplish is to display the name like {{selectedComponent}}
but as excpected it displays "appManagment" because this is the component that was selected.
So the question is, how to display a different name, for example i want just "Managment" to appear instead of "appManagment".
I'm using it for the navigation menu that displays where the user is located, so any help would be appreciated.
I would create an object like the one below
var prettyNames = {
'appManagment': 'Some very nice name'
}
and then just use it whenever you want to display text which corresponds to the currently selected component. For example
prettyNames[selectedComponent]
You can register a custom filter with the global Vue.filter() method, passing in a filterID and a filter function. The filter function takes a value as the argument and returns the transformed value:
Vue.filter('custom', function (value) {
// add your code to determine
// name based on value here
return newName;
})
Then use your filter on the text:
<i class="ion-clipboard"></i>{{ selectedComponent | custom }}
Related
Hi I am trying to get a filter to return instances that have a certain quantity but can't seem to get it to work. What I have in my HTML:
I would like my filter to apply when I hit this checkbox:
<input type="checkbox" value="true" ng-model='filterSales' >
Heres what I have:
<div class='col-md-12' ng-repeat='sku in value | QuantityFilter'>
I was just able to learn how to create a custom filter but now I am having trouble figuring out how to toggle it.
If you just want to know how you can see whether the checkbox is set or not, you can add a parameter to your filter function as shown in the example at the bottom of the documentation: https://docs.angularjs.org/api/ng/filter/filter
You would need to add :filterSales to your ng-repeat where you apply the filter.
<div class='col-md-12' ng-repeat='sku in value | quantityFilter:filterSales'>
In js you need to add another parameter, in this example "array" contains the array which is repeated (in your case "value") and toggleVar has the checkbox value.
"use strict";
app.filter("quantityFilter", function () {
function quantityFilter(array, toggleVar) {
if(!toggleVar){
return array;
}
let result = [];
// TODO: Build new array based on your criteria
return result;
}
return quantityFilter;
});
I'm listing few user details id,name,place,phno using list control form my DB.
My model(userModel) has these 4 items and the array(userList) has some user elements.
Now i use
"ng-repeat user in userList" to populate the data in list.
On click i want to navigate to an update page containing some input fields where i can update that specific users details. For this i need the id. So i'm passing it to the next page.
I've used a scope function updatePage for navigation.
"ng-click updatePage(user.id)"
Inside updatePage function with argument userId:
Apperyio.navigateTo("UpdatePage", {id : userId});
In next page i've taken value as:
var $routeParams = Apperyio.get( "$routeParams" );
var id = $routeParams.id;
I know passing static value as parameters is easy but...
The problem is i'm always getting the same 'id' no matter which row i clicked.
I think the problem is in the function argument passing when clicked.
Please help. I'm a beginner.
Is there any other way to implement such a scenario.
You can share data and functions between pages in Appery Ionic projects using Angular factories.
Click Create New > JavaScript with Name = UserManager and Type = Angular factory.
Set factory code to
define( ['require'], function( require ){
function func( Apperyio ){
var manager = {
userId: null
};
return manager;
}
return [{
/* name for angular resource */
name: 'userManager',
/* type of angular resource */
type: 'factory',
/* angular dependency injection array */
deps: [ 'Apperyio', func ]
}];
});
Then on the 1st page you can set variable before navigating to 2nd page:
Apperyio.get('userManager').userId = user._id;
Apperyio.navigateTo("UpdatePage");
and on the 2nd page you can retrieve it:
var userId = Apperyio.get('userManager').userId;
I have some links in Header of my mvc project that has a styling which shows an icon by a link and add vale inside it. for example consider this code:
<span class="icon-alert-13"></span>
<span class="icon-docs"></span>documents
This is how it looks like:
I have this working with all the numbers for example if I change 13 to 18 like :icon-alert-18 it shows 18 in the icon.
This is style:
.icon-alert-18:before {
content: '\0030';
}
How I can make number part of class="icon-alert-18" as variable so I can pass value from my code and get the icon populated with the value I pass?
Also this is in Mobile development.
Let's say you have a variable called alertNumber and it holds the number you want to display in your icon.
You can fetch your icon with any of the DOM functions:
const numbersIcon = document.getElementById("numbersIcon");
Declare classes that you always want your element to have, for example:
const defaultNumbersIconClasses = "foo";
You can pass that variable to a function that changes the class of the elements like this:
function updateIconTo(number) {
numbersIcon.className = defaultNumbersIconClasses;
numbersIcon.classList.add("icon-alert-" + number);
}
The first line inside the function sets the classes of the element to the default classes you have specified.
The second one adds icon-alert- plus your number as a new class.
You can now use that function on whatever type of event you like, for example, an onclick event:
<span onclick="updateIconTo(alertNumber)" id="numbersIcon" class="icon-alert-13"></span>
Hope that helped!
I am trying to implement a simple contacts list the one shown here. I setup my data source and everything as given in that example. Now if i want to add a search box or dropdown at the top of the page so that what user selects a drop-down menu or types something in the search box, how do I filter my results. For example: If the user types "GRI" in search box i need to show up all contacts with firstname matching "GRI". Any ideas how do i implement this?
Let's say you show your contacts list like this:
<template is="dom-repeat" items="{{filteredContacts}}" as="contact">
<div>{{contact.name}}</div>
</template>
And you have list that looks like this:
...
...
<script>
filteredContacts: {
type: Array,
value: [],
}
unfilteredContacts: {
type: Array,
value: [{name:"testcontact1"}, {name: "testcontact2"}],
}
//this should be called when input changes on your text input
onFilterTextInputChange : function(){
this.filteredContacts = []; //we empty the array so that old results won't be shown
var filterString = this.$.myFilterTextInput.value(); // we retrieve the text from the text input that we are supposed to filter on
for(var i=0;i<this.unfilteredContacts.length; i++)
{
//Here you make your filtering logics (the example below will only show contacts whose name match exactly what you type in the input field)
var contact = this.unfilteredContacts[i];
if(contact.name == filterString)
this.push("filteredContacts", contact);
}
}
</script>
Note, the code above might not work to just copy-paste. There might be some syntax errors, but you should get the drift on how you can proceed. :)
I hope someone can help me with this, It's a strange question maybe as I didn't find an answer online.
I call the database and retrieve a list (in json) of items.
Then in angularjs,I render this list by extracting relevant pieces of data(name,age,etc) and show it properly in a table as a list of rows.
I have then an edit button that takes me to another page where I want to put a dropdown list.
What I want to know if is possible to add to that dropdown list the rendered list I previously created in my previous page.
is it possible to save the previously rendered list in a variable and then use that variable in the dropdown?
thank you
You could store the list within a controller and make this data availablte to this dropdown, I think.
Instead of trying to query for the list, add the list to the template, get the list from the template and render somewhere else, I'd suggest query for the list, save the list in a service , and then when you want to use that list again, get it from the service. Something like:
service:
var services = angular.module('services');
services.factory('getListService',['$http',function($http){
var getListOfStuff = function(){
//call to database
return //your json
};
var extractNameAgeEtc = function(){
var myListOfStuff = //get list of stuff from $http or database
var myListOfNameAgeEtc = //make a list of tuples or {name,age,etc} objects
return myListOfNameAgeEtc;
};
return {
extractNameAgeEtc : extractNameAgeEtc
};
}]);
controllers:
angular.module('controllers',['services']);
var controllersModule = angular.module('controllers');
controllersModule.controller('tableRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your table rendering template, probably with ng-repeat
$scope.MyTableValue = getListService.extractNameAgeEtc();
}]);
controllersModule.controller('dropdownRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your dropdown rendering template, probably with ng-repeat
$scope.MyDropDownValue = getListService.extractNameAgeEtc();
}]);