We Keep Coding

How to map data depending on whether I ever get different objects? JS Angular 2+

I need to filter through, but the problem is that the knowledge I get changes its properties
First example of object ( of arrays )
{ name : 'test' , value: 'Values 1' },
{ name :'test 2' , value: 'Values 2' }
And when i filter this is easy:
<span *ngFor="let date of dates">
{{ date.value }}
</span>
But second time i got different data
{ name : 'test' , value: 'Values 1' },
{ name :'test 2' , value: 'Values 2' }
{ name :'test 3' , value: [{name :'test 3' , value: 'Values 3'}] },
{ name :'test 4' , value: [{name :'test 4' , value: 'Values 4'}] }
I need to filter this data and show only value ( last value )
the menu is currently displayed result example:
Values 1 , Values 2, [Object Object] , [Object Object]

You could NgIf and check if date.value is typeof array, if yes and its only 1 object, then make it display {{date.value.value}} else if its not an array display {{date.value}} ... sorry I can't type specifics

You can use map to modify the array of objects as per your need.
dates.map(x=>{
if(Array.isArray(x.value))
x.value = x.value[0].value
return x;
});
The result will be
[{ name : 'test' , value: 'Values 1' },
{ name :'test 2' , value: 'Values 2' }
{ name :'test 3' , value: 'Values 3'},
{ name :'test 4' , value: 'Values 4' }]
Update: if you want to print all the values, you can join them using map function, this will work for n objects inside value array.
dates.map(filerVal => {
if (Array.isArray(filerVal.value)){
filerVal.value = filerVal.value.map(v=>v.value).join(' ');
}
return filerVal;
});
stackblitz link.
let me know if this is what you expect.

How to disable a tab element from array of tabs in Angular and Typescript

Below is the 5 array of tabs that the user can click. I want to disable the tabs element 2 and 3. So that the tab name is visible but the user should not be able to click on those tab.
I have tried setting the tabs to active: false in the typescript file but that didn't work. I'm not sure on how to go about it.
Any help or suggestions would be greatly appreciated.
TypeScript
public static User_Tabs: any [
{ value: 'user_tab_one', viewValue: 'User 1'},
{ value: 'user_tab_two', viewValue: 'User 2'},
{ value: 'user_tab_three', viewValue: 'User 3'},
{ value: 'user_tab_four', viewValue: 'User 4'},
{ value: 'user_tab_five', viewValue: 'User 5'}];
HTML
<div class= "user-tabs">
<ng-container *ngFor = "let tab of userTabs">
<div class="filter" (click)="onTabSelect(tab.value)"
[ng-class]="{'activeTab': tab.value === userTabType}">
{{tab.viewValue}}</div>
</ng-container>
</div>

You can add isActive flag in your User_Tabs array & for element 2 and 3 pass isActive Boolean value as false
public static User_Tabs: any [
{ value: 'user_tab_one', viewValue: 'User 1', isActive :true},
{ value: 'user_tab_two', viewValue: 'User 2', isActive :false},
{ value: 'user_tab_three', viewValue: 'User 3', isActive :false},
{ value: 'user_tab_four', viewValue: 'User 4', isActive :true},
{ value: 'user_tab_five', viewValue: 'User 5', isActive :true}
];
In Html, you can use [disabled] attribute.
<ng-container *ngFor = "let tab of userTabs">
<div class="filter" (click)="onTabSelect(tab.value)" [disabled]='!tab.isActive'>
{{tab.viewValue}}</div>
</ng-container>

How to use the text attribute from options in a form select with V-Model

I currently have a vue bootstrap form with several inputs, one being a select.
<b-form-select id="myInput"
:options="listOfOptions"
v-model="form.selection"
required>
</b-form-select>
With options being:
listOfOptions: [
{
text: 'Option A',
value: 'A'
},
{
text: 'Option B',
value: 'B'
},
{
text: 'Option C',
value: 'C'
},
],
As expected, when I select one, it sets form.selection to the value I have chosen, so if I select 'Option C', form.selection is set too 'C'.
I now have another requirement. I need to assign the value of text to a new variable in form, lets call it name. So when I select 'Option B' form.selection = 'B' and form.name = 'Option B'. I've been playing around, but can't seem to get it right.

The bootstrap select component is designed this way and if want to has the text as part of data that you select, you must change the source:
listOfOptions: [
{
text: 'Option A',
value: {
text: 'Option A',
value: 'A'
}
},
...
]
Now, form.selection is an object that you have them.

Set Angular checkbox repeat from outside controller

I am trying to simplify my controller. So I tried to set variable to populate my checkbox list from outside controller. Is it possible?
Here is my current code http://jsfiddle.net/ilmansg/Lx37kr3e/1/
VIEW HTML
<div ng-controller="AdminEventsCtrl">
<h1>Array 1</h1>
<ul>
<li ng-repeat="item in array1">
<input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" />
{{item.text}}
</li>
</ul>
<h1>Array 2</h1>
<script>
array2 = [{
text: 'Option 1',
value: 'opt1'
}, {
text: 'Option 2',
value: 'opt2'
}, {
text: 'Option 3',
value: 'opt3'
}, {
text: 'Option 4',
value: 'opt4'
}];
</script>
<ul>
<li ng-repeat="item in array2">
<input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" />
{{item.text}}
</li>
</ul>
<pre>Array1= {{array1}}</pre>
<pre>Array2= {{array2}}</pre>
</div>
SCRIPT JS
var myApp = angular.module('myApp', []);
function AdminEventsCtrl($scope) {
$scope.formData = {};
$scope.array1 = [{
text: 'Option 1',
value: 'opt1'
}, {
text: 'Option 2',
value: 'opt2'
}, {
text: 'Option 3',
value: 'opt3'
}, {
text: 'Option 4',
value: 'opt4'
}];
}

No this is not possible because Angular would have no idea which scope to attach the array to. Here is a simplified solution to your problem of your controller being messy:
Have two arrays, one for each property text and value.
function AdminEventsCtrl($scope) {
$scope.formData = {};
$scope.array1 = [];
var t = ['Option 1', 'Option 2', 'Option 3'];
var v = ['opt1', 'opt2', 'opt3'];
for(i=0;i<t.length;i++){
$scope.array1.shift({text:t[i],value:v[i]});
}
}
This may be a little more code, but it looks a lot less messy. It also allows you to easily add in new values.

I end up making factory to hold all my arrays, then use that factory in my controller

custom angular filter used on ng-option leaves blank options

I am trying to filter out some options in a select element using angular.js. The problem is that for every item in the model that doesn't meet the filter criteria I get a blank option element in the select.
My questions are:
How can I fix the custom filter to remove the empty options?
Is there a way to modify the value of my ng-options directive to perform this filter more declaratively in the markup?
The code is below and you can also find it at http://jsfiddle.net/G4qkW/
<div ng-app="myApp">
<div ng-controller="myController">
<select ng-model="militaryBranches" ng-options="m as m | coreBranches for m in militaryBranches">
<option value="">Select Military Branch</option>
</select>
</div>
function myController($scope) {
$scope.militaryBranches = [{
BranchId: '1',
Name: 'Air Force'
},{
BranchId: '2',
Name: 'Army'
},{
BranchId: '3',
Name: 'Coast Guard'
},{
BranchId: '4',
Name: 'Marines'
},{
BranchId: '5',
Name: 'Navy'
},{
BranchId: '6',
Name: 'National Guard 1'
},{
BranchId: '7',
Name: 'National Guard 2'
},{
BranchId: '8',
Name: 'Some Other Branch'
}];
}
var app = angular.module('myApp', []);
app.filter('coreBranches', function() {
return function(item) {
if (item.BranchId < 6) {
return item.Name;
}
};
});

I have edited your fiddle: http://jsfiddle.net/G4qkW/5/
I guess you want the branches filtered out, not to display their names. You need to apply the filter to the collection, not to the name:
m.BranchId as m.Name for m in militaryBranches | coreBranches
To make this work, edit the filter like this:
app.filter('coreBranches',
function () {
return function (items) {
var filtered = [];
angular.forEach(items, function (item) {
if (item.BranchId < 6) {
filtered.push(item);
}
});
return filtered;
}
});