I'm trying to use angular-translate to translate the data from a select input on a form made formly, but I can't make it work properly.
Basically, when using angular-translate for other types of input, I would have to do something like
'templateOptions.label': '"NAME" | translate',
'templateOptions.placeholder': '"NAME" | translate'
following this pattern, I've tried to put my data like this:
"templateOptions.options": [
{
"name": "{{ 'OPT1' | translate }}",
"id": 1
},
{
"name": "{{ 'OPT2' | translate }}",
"id": 2
}
]
But that gives me nothing on the dropdown menu. Can someone give me any directions here?
The complete code can be found on the link http://output.jsbin.com/horawaqaki/
Thanks for the help!
In this case you can use $translate service inside your controller. This service can return you translated values, but it is asynchronous operation. Because of this you should add some flag in your controller in order to show form only when you receive this translations (in this example I'm going to use vm.areFieldGenerated and then show/hide form and element with ng-if).
So, basically you should pass an array of localization keys and $translate service will return you the following object:
{
'NAME': 'Name',
'OPT1': 'Working!',
'OPT2': 'Working indeed!'
}
And after that you are able to use this value to localize your field title or options.
Your function for generating fields and assigned translated values to the options will look like this:
// variable assignment
vm.env = getEnv();
vm.model = {};
vm.options = {formState: {}};
vm.areFieldsGenerated = false;
generateFields();
// function definition
function generateFields() {
$translate(['NAME', 'OPT1', 'OPT2']).then(function(translationData) {
vm.fields = [
{
key: 'item',
type: 'select',
templateOptions: {
valueProp: 'id',
labelProp: 'name',
options: [
{name:'Not working!', id: 1},
{name:'Not working indeed!', id: 2}
]
},
expressionProperties: {
'templateOptions.label': transationData['NAME'],
'templateOptions.options': [
{
name: translationData['OPT1'],
id:1
},
{
name: translationData['OPT2'],
id:2
}
]
}
}
];
vm.originalFields = angular.copy(vm.fields);
vm.areFieldsGenerated = true;
});
}
I've created working example here.
More examples with $translate on angular-translate.github.io.
Related
heres my output Image html How can I delete Object in array and push when adding some Data
angular.module('myApp.Tree_Service', [])
.factory('TreeService', function() {
var svc = {};
var treeDirectories = [
{
name: 'Project1',
id: "1",
type: 'folder',
collapse: true,
children: [
{
name: 'CSS',
id: "1-1",
type: 'folder',
collapse: false,
children: [
{
name: 'style1.css',
id: "1-1-1",
type: 'file'
},
{
name: 'style2.css',
id: "1-1-2",
type: 'file'
}
]
}
]
}
];
svc.add = function () {}
svc.delete = function (item, index) { }
svc.getItem = function () { return treeDirectories; }
return svc;
});
})();
I'm Newbee in Angularjs and I don't know how much to play it.
Hopefully someone can help me. Im Stucked.
Well you can delete any object by just usingdelete Objname.property
So for example you want to delete Children in treeDirectories first index object you can use delete treeDirectories[0].children if you want to delete children inside children then delete treeDirectories[0].children[0].children
if you want to remove an index from an array in lowest level children then
treeDirectories[0].children[0].children.splice(index,1)
for pushing data is for object you can directly assign value to the property you want
treeDirectories[0].children[0].newproperty = "check"
And for array you can
treeDirectories[0].children[0].children.push(object)
So I have an array thats being returned by a function:
console.log(join_ids)
[ '\'26c14292-a181-48bd-8344-73fa9caf65e7\'',
'\'64405c09-61d2-43ed-8b15-a99f92dff6e9\'',
'\'bdc034df-82f5-4cd8-a310-a3c3e2fe3106' ]
I was initially able to split the array using this function:
join_ids = join_ids.split(',');
I want to try and remove the backslashes from the output and this is the function I'm using:
join_ids = join_ids.replace(/\\/g, "");
console.log(typeof(join_ids));
object
I am trying to send a notification and the parameters in it are:
let message = {
app_id: `${app_id}`,
contents: {"en": "Yeah Buddy, Rolling Like a Big Shot!"},
filters: [{'field': 'tag', 'key': 'userId', 'relation': '=', 'value': `${join_ids[0]}`}],
ios_badgeType: 'Increase',
ios_badgeCount: 1
};
The response I'm seeing is the following:
console.log(message);
{ app_id: '****************',
contents: { en: 'Yeah Buddy, Rolling Like a Big Shot!' },
filters:
[ { field: 'tag',
key: 'userId',
relation: '=',
value: '\'26c14292-a181-48bd-8344-73fa9caf65e7\'' } ],
ios_badgeType: 'Increase',
ios_badgeCount: 1 }
I want the respone to be:
value: '26c14292-a181-48bd-8344-73fa9caf65e7'
What might I be doing wrong?? Thanks!
This could be done by using a replace() with a simple regex and a tagged template literal when you're inserting the value into your message object as a template literal.
function stripEscape (strings, ...values) {
return values[0].replace(/\\`/g, '');
}
let message = {
app_id: `${app_id}`,
contents: {"en": "Yeah Buddy, Rolling Like a Big Shot!"},
filters: [{'field': 'tag', 'key': 'userId', 'relation': '=', 'value': stripEscape`${join_ids[0]}`}],
ios_badgeType: 'Increase',
ios_badgeCount: 1
}
If you do not want to use the tagged template literal, you can chain the replace on your template literal paramter.
let message = {
app_id: `${app_id}`,
contents: {"en": "Yeah Buddy, Rolling Like a Big Shot!"},
filters: [{'field': 'tag', 'key': 'userId', 'relation': '=', 'value': `${join_ids[0].replace(/\\`/g, '')}`}],
ios_badgeType: 'Increase',
ios_badgeCount: 1
}
Hope this helps get what you were wanting, if you run into problems with it...let me know as I am still learning how to use ES6 features effectively.
I have following hardcoded map:
$scope.lists = {
test1: [
{ name: 'My Name' }
],
test2: [
{ name: 'My Second Name' }
]
};
$scope.selectedList = "test1";
Then inside my pug/html file:
div(ng-repeat="list in lists.selectedList")
What I need is I want to have array to be selected depend on var of selectedList. Am I able to do that in AngularJS?
You can use square-bracket syntax in angular attributes:
div(ng-repeat="list in lists[selectedList]")
Say I have a model like:
$scope.types = [
{
name: 'X1500',
value: 'X1500',
tags: ['GRE','GRB']
},
{
name: 'VSH',
value: 'VSH',
tags: ['GRE','GRB']
}
]
And I want to filter all types that has GRE in their tags. Something like:
"type.value as type.name for type in types | filter:types.tags='GRE'"
How can I do this ?
Apparently, the filter mentioned in the question does work :)
Does the built in Angular "filter" support filtering an array in the sense that "filter where array contains "
Such as follows:
$scope.currentFilter = "Allentown";
$scope.users = [{
name: "user1",
locations: [
{ name: "New York", ... },
{ name: "Allentown", ... },
{ name: "Anderson", ... },
]
}, ... ];
<div ng-repeat="user in users | filter : { locations: { name: currentFilter } }"></div>
In other words I'm looking to filter to only users with a "locations" array that CONTAINS a location that matches the string by name.
If not, how can I accomplish this with a custom filter?
Your code snippet works as is since Angular 1.2.13. In case you're using an older version (tested on 1.0.1) and don't need to reuse your filtering routine across controllers (in which case you should declare a proper filter), you can pass the built-in filter a predicate function :
<div ng-repeat="user in users | filter : hasLocation">{{user.name}}</div>
And write something like this :
$scope.currentFilter = "Allentown";
$scope.hasLocation = function(value, index, array) {
return value.locations.some(function(location) {
return location.name == $scope.currentFilter;
});
}
Fiddle here.