How can I dynamically set the settings options for the ng-dropdown-multiselect, like setting the data, is this posible?
Check it out here:
http://plnkr.co/edit/ntVBcGRsD0HXgQoshBlp?p=preview
view
<div ng-dropdown-multiselect=""
options="example65data"
selected-model="example65model"
extra-settings="example65settings"></div>
controller
$scope.example65model = [{id: 1}];
$scope.example65data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}];
$scope.example65settings = {selectionLimit: 3};
$scope.updateMultiSelectLimit = function (){
$scope.example65settings = {selectionLimit: 2};
}
$scope.updateData = function(){
$scope.example65data = [{id: 1, label: "Peter"}, {id: 2, label: "Yiss"}, {id: 3, label: "Max"}];
}
//HTML
<div ng-dropdown-multiselect="example65data" id="xyz"//Can Be Anything options="example65data" selected-model="example65model"></div>
//JS
$scope.example65model= [];
function abc//Can Be Anything() {
var allData = hrmsService.getdata//Service Function Call();
allData.then(function (//Take any variable//pqr) {
DataObj = [];
for (var i in pqr.data) {
item = {}
item["id"] = pqr.data[i].Id//Primary Key;
item["label"] = apiSkills.data[i].Description//Any Description Field;
DataObj.push(item);
}
$scope.example65data= DataObj;
}, function () {
alert("Data Not Found");
});
}
Try this
//HTML
<div
ng-dropdown-multiselect=""
options="tabListdata"
selected-model="tabListmodel"
extra-settings="tabListsettings"
events="{ onSelectionChanged: getAllPolicies }"
>
</div>
//JS
$scope.tabListmodel = [];
$scope.tabListdata = [{
id: 1,
label: "Option 1"
}, {
id: 2,
label: "Option 2"
}, {
id: 3,
label: "Option 3"
}, {
id: 4,
label: "Option 4"
}, {
id: 5,
label: "Option 5"
}, {
id: 6,
label: "Option 6"
}];
$scope.tabListsettings = {
smartButtonMaxItems: 6,
smartButtonTextConverter: function (itemText, originalItem) {
return itemText;
}
};
$scope.getAllPolicies = function () {
console.log("$scope.tabListmodel", $scope.tabListmodel);
}
Related
I would like to display the property of age and if a person is vaccinated under each name after each button's click, but these properties appear under the page. How can I do it?
Furthermore, which concepts of the dom should I explore in order to build logics where there is a correlation and interaction between dom and objects? (e.g. select an item via the dom and view its details).
<body>
<div class="container">
<div class="list-container"></div>
</div>
<script src="script.js"></script>
</body>
const persons = [
{ name: "carl", age: 20, vaccinated: true, id: 1 },
{ name: "alex", age: 45, vaccinated: false, id: 2 },
{ name: "alice", age: 12, vaccinated: true, id: 3 },
{ name: "erick", age: 2, vaccinated: true, id: 4 },
{ name: "fred", age: 23, vaccinated: false, id: 5 },
{ name: "wandy", age: 13, vaccinated: true, id: 6 },
];
const generalContainer = document.querySelector(".container");
const listContainer = document.querySelector(".list-container");
function renderItems(obj) {
let dataId;
let item;
let sub;
obj.forEach((element) => {
item = document.createElement("div");
let itemAttr = document.createAttribute("data-id");
itemAttr.value = element.id;
item.setAttributeNode(itemAttr);
dataId = item.dataset.id;
item.innerHTML = `<p>NAME: ${element.name}</p>
<button class="btn">${element.name}</button>
<div class='sub'></div>
`;
sub = document.querySelector(".sub");
listContainer.appendChild(item);
});
let btn = document.querySelectorAll(".btn");
let selected;
let subItem = document.createElement("div");
btn.forEach((el) => {
el.addEventListener("click", (e) => {
e.preventDefault();
let textValue = el.textContent;
selected = obj.find((ele) => {
return ele.name === textValue;
});
//subItem = document.createElement("div");
subItem.innerHTML = `
<div><p>AGE: ${selected.age}</p>
<p>VACCINE STATUS: ${
selected.vaccinated ? "Vaccinated" : "Not vaccinated"
}</div>`;
console.log(sub);
sub.appendChild(subItem);
item.append(sub);
});
});
}
renderItems(persons);
Try a more simplified version. Among other things, it uses event delegation for event listeners:
const persons = [{
name: "carl",
age: 20,
vaccinated: true,
id: 1
},
{
name: "alex",
age: 45,
vaccinated: false,
id: 2
},
{
name: "alice",
age: 12,
vaccinated: true,
id: 3
},
{
name: "erick",
age: 2,
vaccinated: true,
id: 4
},
{
name: "fred",
age: 23,
vaccinated: false,
id: 5
},
{
name: "wandy",
age: 13,
vaccinated: true,
id: 6
}
];
let listContainer = document.querySelector(".list-container");
function renderItems(obj) {
obj.forEach((element) => {
new_elem = `
<div data-id="${element.id}">
<p>NAME: ${element.name}</p>
<button but-id="${element.id}">${element.name}</button>
<div class='sub'></div>
</div>
`;
listContainer.insertAdjacentHTML("afterbegin", new_elem);
});
listContainer.addEventListener("click", (e) => {
person = e.target.getAttribute("but-id");
p_name = e.target.innerText;
dest = document.querySelector(`div[data-id="${person}"] div.sub`);
let selected = persons.find(({name}) => name === p_name);
subItem = `
<div>
<p>AGE: ${selected.age}</p>
<p>VACCINE STATUS: ${
selected.vaccinated ? "Vaccinated" : "Not vaccinated"
}</p>
</div>
`;
dest.innerHTML = subItem;
});
}
renderItems(persons);
<body>
<div class="container">
<div class="list-container"></div>
</div>
</body>
The arrays I have
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
I would like to find the online and offline ones by comparing the two series
I want to do:
const userLists = [
{ id: 1, name: "field 1", online: true },
{ id: 2, name: "field 2", online: false },
{ id: 3, name: "field 3", online: true },
{ id: 4, name: "field 4", online: false },
];
Using Array.map and Array.some
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
var retVal=users.map(u=>{
var isOnline=onlineUsers.some(ou=> ou.id==u.id);//this will check if onlineUsers have some record with given userid
return {...u,online:isOnline}
})
console.log(retVal)
You can just traverse through the user list and you can find out the onlineuser using find and just push it in the onlineuserList.
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
const userLists = [];
users.forEach(user => {
if(onlineUsers.find(q => q.id == user.id)){
userLists.push({
id: user.id,
name: user.name,
online: "true"
})
}
else{
userLists.push({
id: user.id,
name: user.name,
online: "false"
})
}
})
console.log(userLists);
a bit faster approach using Array.indexOf() and JSON.strigify()
const onlineUsers = JSON.stringify([
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
]);
const userList = users.map(user =>
({
...user,
online: onlineUsers.indexOf(JSON.stringify(user)) > -1
})
);
OR if you neither want to change original onlineUsers array nor declare another variable:
const userList = users.map(user =>
({ ...user, online: JSON.stringify(onlineUsers).indexOf(JSON.stringify(user)) > -1 })
);
i have multiple data for one id , i want filter my data like this
$scope.mpArray =[
{ Id: 1, Name: Madhu, Address: Upal },
{ Id: 1, Name: Chandu, Address: Upal },
{ Id: 2, Name: Srinu, Address: Kphb },
{ Id: 2, Name: Vijay, Address: kphb },
{ Id: 3, Name: Ajay, Address: Banglore },
{ Id: 3, Name: Narsi, Address: Banglore },
{ Id: 3, Name: Peter, Address: Banglore },
];
i want to filter my array like this
var FilterArray = [
{ Id: 1,Madhu, Chandu},
{ Id: 2, Srinu, Vijay},
{ Id: 3, Ajay, Narsi, Peter},
];
At first you need to change your FilterArray to
[
{
"Id": 1,
"Name": [
"Madhu",
"Chandu"
]
},
{
"Id": 2,
"Name": [
"Srinu",
"Vijay"
]
},
{
"Id": 3,
"Name": [
"Ajay",
"Narsi",
"Peter"
]
}
]
Notice that name is an array. The FilterArray of your question
var FilterArray = [
{ Id: 1,Madhu, Chandu},
{ Id: 2, Srinu, Vijay},
{ Id: 3, Ajay, Narsi, Peter},
];
Do not contain a valid JSON object inside the array so you need to change the structure to the one where add a new key Name in the JSON object of FilterArray as like the first structure above. Then the below code works great.
$(document).ready(function(){
var myArray =[
{ Id: 1, Name: "Madhu", Address: "Upal" },
{ Id: 1, Name: "Chandu", Address: "Upal" },
{ Id: 2, Name: "Srinu", Address: "Kphb" },
{ Id: 2, Name: "Vijay", Address: "kphb" },
{ Id: 3, Name: "Ajay", Address: "Banglore" },
{ Id: 3, Name: "Narsi", Address: "Banglore" },
{ Id: 3, Name: "Peter", Address: "Banglore" },
];
var FilterArray = [];
var matched;
for(var i=0;i<myArray.length; i++){
matched = false;
var myArrayId = myArray[i].Id;
for(var j=0; j<FilterArray.length; j++){
var FilterArrayId = FilterArray[j].Id;
if(myArrayId === FilterArrayId){
matched = true;
FilterArray[j].Name.push(myArray[i].Name);
// no need to loop further
break;
}
}
if(!matched){
var obj = {
'Id' : myArrayId,
'Name' : [myArray[i].Name],
}
FilterArray.push(obj);
}
}
console.log(FilterArray);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
try this
var mpArray =[
{ Id: 1, Name: 'Madhu', Address: 'Upal' },
{ Id: 1, Name: 'Chandu', Address: 'Upal' },
{ Id: 2, Name: 'Srinu', Address: 'Kphb' },
{ Id: 2, Name: 'Vijay', Address: 'kphb' },
{ Id: 3, Name: 'Ajay', Address: 'Banglore' },
{ Id: 3, Name: 'Narsi', Address: 'Banglore' },
{ Id: 3, Name: 'Peter', Address: 'Banglore' },
];
var filterObject = {};
mpArray.forEach(function (item) {
if (!filterObject[item.Id]) {
filterObject[item.Id] = [];
}
filterObject[item.Id].push(item.Name);
});
console.log(filterObject);
$scope.mpArray =[
{ Id: 1, Name: 'Madhu', Address: 'Upal' },
{ Id: 1, Name: 'Chandu', Address: 'Upal' },
{ Id: 2, Name: 'Srinu', Address: 'Kphb' },
{ Id: 2, Name: 'Vijay', Address: 'kphb' },
{ Id: 3, Name: 'Ajay', Address: 'Banglore' },
{ Id: 3, Name: 'Narsi', Address: 'Banglore' },
{ Id: 3, Name: 'Peter', Address: 'Banglore' },
];
var FilterArray = [];
var FilteredArrayIds=[];
$scope.mpArray.forEach(
function(detailObj) {
if(FilteredArrayIds.indexOf(detailObj.Id)==-1)
return FilteredArrayIds.push(detailObj.Id);
});
for(var i=0; i<FilteredArrayIds.length;i++)
{
var result = $scope.mpArray.filter(function( obj ) {
return obj.Id == FilteredArrayIds[i];
});
var rsltNames = result.map(function(obj){
return obj.Name;
})
var filteredObj ={
id:FilteredArrayIds[i]+',' +rsltNames.join()
}
FilterArray.push(filteredObj);
}
console.log(filteredObj)
I'm trying to give an array to my makeSlider function.
The HTML5 Data attribute selects the correct array. Unfortunately, it is not interpreted as an array.
It does not work:
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
Is working:
makeSlider(sliderID, targetID, dataMehrfachauswahlmatrixLeft);
HTML:
<div class="noui-slider" id="slider-1" data-slider="dataMehrfachauswahlmatrixLeft">
<!-- slider here -->
</div>
<div class="hidden-md-up">
<!-- Store selected value -->
<input class="form-control slider-value" id="input-target-1">
</div>
JS (script.js):
$(document).ready(function() {
// slider array
// Matrix 1
var dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
var dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
...
}
// init slider
$(".noui-slider").each(function(index) {
var sliderID = $(this).attr("id"),
targetID = $(this).next().find(".slider-value").attr("id");
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
});
});
Problem with current implementation it that the variable value doesn't refers to the defined array. Its a string literal having value i.e. dataMehrfachauswahlmatrixLeft, dataMehrfachauswahlmatrixRight
Define the array in window or any other object scope.
// Matrix 1
window.dataMehrfachauswahlmatrixLeft = [...];
// Matrix 2
window.dataMehrfachauswahlmatrixRight = [...]
Then use Bracket notation to access object dynamic properties.
values = $(this).data("slider");
makeSlider(sliderID, targetID, window[values]);
An example here
$(document).ready(function() {
var myOBj = {};
// slider array
// Matrix 1
myOBj.dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
myOBj.dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
console.log(values)
}
$(".noui-slider").on('click', function() {
var values = $(this).data("slider");
makeSlider(1, 2, myOBj[values]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixLeft'>1</div>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixRight'>2</div>
In this example the pre defined item not selected by default. Please help to achieve this.
<button ng-click="addRow()">Add Row</button>
<ul>
<li ng-repeat="row in rows">
<select kendo-drop-down-list ng-model="row.selected" ng-init="row.selected = row.choosenItem" ng-options="item.name for item in list | filter:notUsed(row)"></select>
<button ng-click="deleteRow(row)">X</button>
</li>
</ul>
var app = angular.module('plunker', []);
In the data ($scope.rows) item selected in row.choosenItem property. Still the selectbox not filled with choosenItem.
app.controller('MainCtrl', function($scope) {
$scope.list = [{
id: 1,
name: "one"
}, {
id: 2,
name: "Two"
}, {
id: 3,
name: "Three"
}, {
id: 4,
name: "Four"
}, {
id: 5,
name: "Five"
}, {
id: 6,
name: "Six"
}];
$scope.rows = [{
choosenItem: {
id: 2,
name: "Two"
},
label: "row 1",
selected: 2
}, {
choosenItem: {
id: 4,
name: "Four"
},
label: "row 2",
selected: 4
}];
function byID(member) {
return member.choosenItem.id;
}
$scope.notUsed = function(row) {
return function(item) {
return item.id === row.choosenItem.id || !_.indexBy($scope.rows, byID)[item.id];
}
};
$scope.addRow = function addRow() {
$scope.rows.push({
choosenItem: {},
label: "row "+($scope.rows.length+1),
selected: 0
})
};
$scope.deleteRow = function deleteRow(row) {
};
$scope.onSelectChange = function onSelectChange(row){
row.choosenItem = _.findWhere($scope.list, {'id': parseInt(row.selected)});
};
});
Example code here
Basically, when using ngOptions the syntax is value as text for item in array - so keeping that in mind, define your value:
ng-init="row.selected = row.choosenItem.id" ng-options="item.id as item.name for item in list"