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
Related
I have dropdown options as
const options = [
{ key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' },
{ key: '2', text: 'Example 2', value: 'Example 2', type:'XYZ' },
{ key: '3', text: 'Example 3', value: 'Example 3', type:'ABC' },
{ key: '4', text: 'Example 4', value: 'Example 4', type:'XYZ' },
];
I want to build semantic-ui dropdown dynamically such that ,each dropdown value will come under their respective 'type' value.
In this case Example 1,Example 3 will come under 'ABC' Header tag,
and Example 2,Example 4 under 'XYZ' Header tag.
ABC
Example 2
Example 4
XYZ
Example 2
Example 4
I tried to solve it by following way.
First get all distinct categories of array of option.
categories = options.reduce((acc,curr)=> !acc.includes(curr.type)? [...acc,curr.type]: [...acc] ,[]).slice()
Then I need to map all possible json to it's respective type
categories.map(x=>{
resOption[x]= options.filter(j => j.type===x).slice()
})
My full code here
var resOption = {}
var categories =[]
categories = options.reduce((acc,curr)=> !acc.includes(curr.type)? [...acc,curr.type]: [...acc] ,[]).slice()
categories.map(x=>{
resOption[x]= options.filter(j => j.type===x).slice()
})
return(
<Dropdown selection >
<Dropdown.Menu>
{
Object.keys(resOption).map((type)=>(
<React.Fragment>
<Dropdown.Header content={type} style={{color:"#5aa7e6"}} />
{
resOption[type].map((option)=>(
<Dropdown.Item text={option.text} value={option.value} onClick={onChange} />
))
}
<Dropdown.Divider />
</React.Fragment>
))
}
</Dropdown.Menu>
</Dropdown>
)
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>
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.
I have a couple of ng-repeat, where the selected item in the first list filters the second list, by a property which is an object. And then there is the possibility to add items to both lists. Here illustrates the structure:
<div class="list-container">
<div class="list-item"
ng-repeat="class in classList"
ng-click="setActiveClass(class)">
{{class.name}}
</div>
</div>
<div class="input-group">
<input type="text" ng-model="newClassName">
<button ng-click="addNewClass()">Add</button>
</div>
<div class="list-container">
<div class="list-item"
ng-repeat="item in itemsList | filter:{class: activeClass}">
{{item.name}}
</div>
</div>
<div class="input-group">
<input type="text" ng-model="newItemName">
<button ng-click="addNewItem()">Add</button>
</div>
And the javascript:
.controller('controller', function () {
$scope.classList = [
{
'name': 'Class 1'
},
{
'name': 'Class 2'
},
{
'name': 'Class 3'
}
];
$scope.itemsList = [
{
'name': 'Item 1',
'class': $scope.classList[0]
},
{
'name': 'Item 2',
'class': $scope.classList[1]
},
{
'name': 'Item 3',
'class': $scope.classList[2]
}
];
$scope.activeClass = {};
$scope.setActiveClass = function (newActiveClass) {
$scope.activeClass = newActiveClass;
};
$scope.addNewClass = function () {
var nl = $scope.classList.push({
'name': $scope.newClassName
});
$scope.activeClass = $scope.classList[nl-1];
};
$scope.addNewItem = function () {
$scope.itemsList.push({
'name': $scope.newItemName,
'class': $scope.activeClass
});
};
});
The problem is, when the new class item is added, the second list shows all the items, like if there were no filter. If I select any class other than the new, the filter works as expected, but on the new one, the filter shows all elements in the array. What could be happening?
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;
}
});