How to render only visible items in AngularJs Dropdown - javascript

I have following AngularJs object:
$scope.control = {'options': [{ "id": 1, "text": "Option 1", "isHidden": 0 }, { "id": 2, "text": "Option 2", "isHidden": 1 }, { "id": 3, "text": "Option 3", "isHidden": 0 }]};
Now, I CAN render a dropdown with all items using following:
<select ng-model="control.uiSelValue" ng-options="option.text for option in control.options" class="form-control"></select>
How can I render only those elements which are marked "isHidden = 0"? i.e. I want to render only "Option 1" and "Option 3" only in Dropdown.


Apply a custom filter to control.options. You really don't need to create this filter since you can use an expression but I think it is a bad practice to make too much logic in the view.
For example:
Demo
View
<select ng-model="control.uiSelValue"
ng-options="option.text for option in control.options | filter:myFilter"
class="form-control">
</select>
Controller
$scope.control = {
options: [{
"id": 1,
"text": "Option 1",
"isHidden": 0
}, {
"id": 2,
"text": "Option 2",
"isHidden": 1
}, {
"id": 3,
"text": "Option 3",
"isHidden": 0
}]
};
$scope.myFilter = function (value) {
return value.isHidden === 0;
};

Related

React Native - sort array based off values in common

Hey guys I have the following array that's used to display a flatlist within my app.
Array [
Object {
"data": "Item 1",
"id": "1",
"subjects": "1,8,9,23,11,15,16,14,20",
},
Object {
"data": "Item 2",
"id": "2",
"subjects": "8,11,2,4,16,19",
},
Object {
"data": "Item 3",
"id": "3",
"subjects": "16,20,14,11,9,2",
},
Object {
"data": "Item 4",
"id": "4",
"subjects": "1,16,19",
},
]
However I would like to sort this array based off the subjects value. In the app the user can select a couple of subjects which are represented by numbers so lets say the users selected subjects are:
11, 4, 2, 1
I would like to sort the array so that the items with 3 or more subjects in common with the user are sorted to the top and then items with two and then 1 and then none so the array above should look like this after sorting:
Array [
Object {
"data": "Item 2",
"id": "2",
"subjects": "8,11,2,4,16,19",
},
Object {
"data": "Item 1",
"id": "1",
"subjects": "1,8,9,23,11,15,16,14,20",
},
Object {
"data": "Item 3",
"id": "3",
"subjects": "16,20,14,11,9,2",
},
Object {
"data": "Item 4",
"id": "4",
"subjects": "0,16,19",
},
]
How can I achieve this?
I have been searching around the array sort function:
Array.prototype.sort()
However I have only seen how to sort based off number comparisons I have never seen an array sorted based off values in common. Please could someone help me with this!
EDIT
Array [
Object {
"data": "Item 2",
"id": "2",
"subjects": "8,11,2,4,16,19",
"ranking": "green",
},
Object {
"data": "Item 1",
"id": "1",
"subjects": "1,8,9,23,11,15,16,14,20",
"ranking": "amber",
},
Object {
"data": "Item 3",
"id": "3",
"subjects": "16,20,14,11,9,2",
"ranking": "amber",
},
Object {
"data": "Item 4",
"id": "4",
"subjects": "0,16,19",
"ranking": "red",
},
]

You could create an object with counts of selected subjects and sort descending by this value.
const
data = [{ data: "Item 1", id: "1", subjects: "1,8,9,23,11,15,16,14,20" }, { data: "Item 2", id: "2", subjects: "8,11,2,4,16,19" }, { data: "Item 3", id: "3", subjects: "16,20,14,11,9,2" }, { data: "Item 4", id: "4", subjects: "1,16,19" }],
selected = [11, 4, 2, 1],
counts = data.reduce((r, { id, subjects }) => {
r[id] = subjects
.split(',')
.reduce((s, v) => s + selected.includes(+v), 0);
return r;
}, {});
data.sort((a, b) => counts[b.id] - counts[a.id]);
console.log(data);
console.log(counts);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Select2 "selected": true not working

When parsing the data from the example, the disabled parameter works, but the selected one dosen't. Any ideas why?
Example:
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2",
"selected": true
},
{
"id": 3,
"text": "Option 3",
"disabled": true
}
]
}
Result from site:
Select2 version 4.0.3 - link: Select2 Data Source
JQuery version 3.0.0

selected parameter did not work for me either. Had to use below workaround to make it work -
$(".select").select2({
data: data_names
});
data_names.forEach(function(name) {
if (name.selected) {
$(".select").select2('val', name.id);
}
});

Angular conditional multi selection box

Introduction
I am trying to develop 2 selection (drop-down) boxes that populates the second box depending on the first selection.
for example
Choose product 1 and the second box will then have format 1, 2 and 5.
choose product 2 and the second may have format 2, 3 and 6.
Problem and Question
The first box has been populated by my array, but the second box is not populating depending on the selection not the first, in fact its not populating at all (see screen shot.
HTML
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format" ng-if="user.productName"
ng-options="format.id as format.name for Format in user.productName.format">
</select>
</div>
</div>
controller.js
.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.user = {productName: $scope.productsandformats[0], format: '1'};
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})

Use this code ng-options="format.id as format.name for format in formData.ProductAndFormat.format" instead of your this code ng-options="format.id as format.name for format in user.productName.format"> on your second select box
var app = angular.module('anApp', []);
app.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.formData={};
$scope.formData.ProductAndFormat = $scope.productsandformats[0];
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="dropDown">
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format"
ng-options="format.id as format.name for format in formData.ProductAndFormat.format">
</select>
</div>
</div>
</div>

Pre populating the dropdown value inside ng-repeat in Angular JS

I have an array of objects. I have three properties attorneyId, attorneyName and attorneyList. The attorneyList array should be a drop down. If attorneyId = attorneyName = null then
dropdown will only show Choose attorney. If attorneyId != null and attorneyName != null, the dropdown should display what ever the value is present in attorneyId and attorneyName.
For this i am preparing an object selectedAttorney = {id:list.attorneyId, name:list.attorneyName} and passing this to ng-model of select. When i change the value in dropdown, i am getting the correct values into the selectedAttorney. But if there some value present for attorneyId and attorneyName, the dropdown is not pre populating the value.
HTML :
<div ng-repeat = 'list in List'>
<div class="width-200" ng-init="selectedAttorney = {id:list.attorneyId, name:list.attorneyName}">
{{selectedAttorney}}
<select ng-model="selectedAttorney" ng-options="attorney.name for attorney in list.attorneyList">
<option value="">-- choose attorney --</option>
</select>
</div>
</div>
JS
$scope.List = [ {
"attorneyId": "3",
"attorneyName": "Robert",
"attorneyList": [
{ "id": 1, "name": "sue" },
{ "id": 2, "name": "anthony" },
{ "id": 3, "name": "Robert" },
{ "id": 4, "name": "George" },
{ "id": 5, "name": "Bruce" }
]
},
{
"attorneyId": null,
"attorneyName": null,
"attorneyList": [
{ "id": 1, "name": "sue" },
{ "id": 2, "name": "anthony" },
{ "id": 3, "name": "Robert" },
{ "id": 4, "name": "George" },
{ "id": 5, "name": "Bruce" }
]
}
];
Here is the plunker link.
http://plnkr.co/edit/eqBkX0DNleiFmlO5sm7J?p=preview
Thanks in advance.

Though your approach is right, I prefer writing my select boxes in this manner.
<select ng-model="selectedAttorney">
<option
ng-repeat="attorney in list.attorneyList"
title="{{attorney.name}}"
ng-selected="{{attorney.id == selectedAttorney.id}}"
value="{{attorney}}">{{attorney.name}}
</option>
</select>
and here is the updated working demo : http://plnkr.co/edit/vCNOAPWlR6Mj1kFOgCKT?p=preview

jQuery Wijmo, treeview with attributes from json

I want to generate a treeview from a json, but I need to fill. “attr or .date” in the nodes of treeview
how to do?
data = [{
"text": "Item 1",
"attr": {
"id": 12145646541 "class": "folder"
}
}, {
"text": "Item 2",
"nodes": [{
"text": "Item 2.1"
}, {
"text": "Item 2.2"
}, {
"text": "Item 2.3"
}]
}, {
"text": "Item 3"
}, {
"text": "Item 4"
}]
$("#ul_menu").wijtree({
nodes: data
});
<ul id="ul_menu"></ul>

Kindly take a look at this blog article which explains about binding a wijtree to an external datasource as an json object:
http://wijmo.com/populate-wijtree-from-external-data-source-using-knockout/

Categories

Resources