so, i have a select list and I am trying to select the item dynamically. The thing is, even doe the expression is evaluated to "true" the option is still not being selected
<label for="articlePage">Page:</label>
<select class="form-control pageList" name="articlePage" required="" ng-model="article.page_ID">
<option ng-repeat="page in pages" ng-selected ="{{page.id == article.page_ID}}" value={{page.id}}>{{page.name}}</option>
</select><br>
the scope(pages):
$scope.pages = [
{ name: "Home", id: "1" },
{ name: "Plugs", id: "2" },
{ name: "Pack Bedding", id: "3" },
{ name: "Pot Bedding", id: "4" },
{ name: "Poinsettias", id: "5" },
{ name: "Sales", id: "6" },
{ name: "Process Quality", id: "7" },
{ name: "Environment", id: "8" },
{ name: "Process Technology", id: "9" },
{ name: "Process Control", id: "10" },
{ name: "Infrastructure", id: "11" },
{ name: "News", id: "12" },
{ name: "About", id: "13" },
{ name: "Contact", id: "14" },
{ name: "Find Us", id: "15" },
{ name: "Key Personnel", id: "16" },
{ name: "Recruitment", id: "17" },
{ name: "Legal Information", id: "18" },
{ name: "Hidden", id: "19" }
];
there is also an service that is retrieving my articles, i know i get that right and like i said, the expression is being evaluated. here is a print screen to prove that:
does anyone have any idea why the option isn't being selected?
Thank you! :)
You don't need expression inside the ng-selected! Try this:
<label for="articlePage">Page:</label>
<select class="form-control pageList" name="articlePage" required="" ng-model="article.page_ID">
<option ng-repeat="page in pages" ng-selected ="page.id == article.page_ID" value="{{page.id}}">{{page.name}}</option>
</select><br>
Related
I have my select:
<Select
options={[
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
]}
name="mySelect"
ref={mySelect}
instanceId="mySelect"
defaultValue=""
onChange={() => getSelect(mySelect)}
/>
I have my function:
function getSelect(val) {
console.log(val.current.props.value["value"])
}
This logs the previous value, I understand why this happens but I can't think of another way to attempt this. Is there something similar to afterChange?
To get the current value, you should be using the value from the onChange instead. You don't need ref for this
<Select
options={[
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
]}
name="mySelect"
ref={mySelect}
instanceId="mySelect"
defaultValue=""
onChange={(value) => getSelect(value)}
/>
function getSelect(val) {
console.log(val)
}
It':
val.current.value
Not:
val.current.props.value
And since you are using ref so you don't need to send it throw parameter to handleChange function:
const mySelect = React.useRef(null);
function handleChange() {
if (mySelect.current) {
console.log(mySelect.current.value);
}
}
......
<Select
options={[
{ value: "1", label: "1" },
{ value: "2", label: "2" },
{ value: "3", label: "3" },
{ value: "4", label: "4" },
{ value: "5", label: "5" },
{ value: "6", label: "6" },
]}
name="mySelect"
ref={mySelect}
instanceId="mySelect"
defaultValue=""
onChange={handleChange}
/>
I have an array of objects that is multi-leveled with different names that I need to populate a TreeView component :
export const application_group_one = [
{
id: uniqueId(),
name: "Application 1",
organizations: [
{
id: uniqueId(),
name: "Organization 1",
artifacts: [
{
id: uniqueId(),
name: "Artifact 1",
},
],
},
],
},
{
id: uniqueId(),
name: "Application 2",
organizations: [
{
id: uniqueId(),
name: "Organization 1",
artifacts: [],
},
],
},
];
export const application_group_two = [
{
id: uniqueId(),
name: "Application 3",
organizations: [
{
id: uniqueId(),
name: "Organization 1",
artifacts: [
{
id: uniqueId(),
name: "Artifact 1",
},
{
id: uniqueId(),
name: "Artifact 2",
},
{
id: uniqueId(),
name: "Artifact 3",
},
],
},
{
id: uniqueId(),
name: "Organization 2",
artifacts: [
{
id: uniqueId(),
name: "Artifact 1",
},
{
id: uniqueId(),
name: "Artifact 2",
},
{
id: uniqueId(),
name: "Artifact 3",
},
],
},
{
id: uniqueId(),
name: "Organization 3",
artifacts: [
{
id: uniqueId(),
name: "Artifact 1",
},
{
id: uniqueId(),
name: "Artifacy 2",
},
{
id: uniqueId(),
name: "Artifact 3",
},
],
},
{
id: uniqueId(),
name: "Organization 4",
artifacts: [
{
id: uniqueId(),
name: "Artifact 1",
},
{
id: uniqueId(),
name: "Artifact 2",
},
{
id: uniqueId(),
name: "Artifact 3",
},
],
},
],
},
];
I'm able to output the Organizations but not the artifacts. Having varying names for each children object is giving me a hard time. I would like a TreeView that can expand as many levels as I want with differing names for the nest objects. :
const getTreeItemsFromData = (treeItems) => {
return treeItems.map((treeItemData) => {
let organizations = undefined;
if (treeItemData.organizations && treeItemData.organizations.length > 0) {
organizations = getTreeItemsFromData(treeItemData.organizations);
}
return <TreeItem key={treeItemData.id} nodeId={treeItemData.id} label={treeItemData.name} children={organizations} />;
});
};
const DataTreeView = ({ treeItems }) => {
return (
<TreeView defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />}>
{getTreeItemsFromData(treeItems)}
</TreeView>
);
};
export const Tree = () => {
return (
<div className="App">
<DataTreeView treeItems={application_group_one} />
<br />
<DataTreeView treeItems={application_group_two} />
</div>
);
};
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'm trying to find() with Mongoose with the following query:
let users = await models.users.find({
inv: { $elemMatch: { name: "Some Item", name: "Another Item" } }
});
These documents should be found:
{
inv: [{ name: "Some Item", amount: 5 }]
}
//and
{
inv: [{ name: "Another Item", amount: 15 }]
}
//and
{
inv: [{ name: "Some Item", amount: 5 }, { name: "Another Item", amount: 15 }]
}
//and
{
inv: [{ name: "Some Item", amount: 5 }, { name: "Another Item", amount: 15 }, { name: "Different Item", amount: 1 }]
}
But these shouldn't:
{
inv: [{ name: "Different Item", amount: 1 }]
}
//and
{
inv: []
}
This works fine with regular MongoDB queries, but with Mongoose, this is a problem since you can't have multiple of the same properties in a JavaScript object (name and name in this case). How should I go about handling this?
You are probably looking for $or query operator
db.collection.find({ inv: { $elemMatch: { "$or": [ { name: "Some Item" }, { name: "Another Item" } ] } } })
I'm trying to update values inside $scope.match.teams[0] with vaules for the players' names, but when I input in a single field, it is bound to every players' name for that team.
Controller:
$scope.match = {
teams: [
{
id: 0,
name: "",
players: [
{ id: 1, name: "" },
{ id: 2, name: "" },
{ id: 3, name: "" },
{ id: 4, name: "" },
{ id: 5, name: "" },
{ id: 6, name: "" },
{ id: 7, name: "" },
{ id: 8, name: "" },
{ id: 9, name: "" },
{ id: 10, name: "" },
{ id: 11, name: "" },
]
},
{
id: 1,
name: "",
players: [
{ id: 1, name: "" },
{ id: 2, name: "" },
{ id: 3, name: "" },
{ id: 4, name: "" },
{ id: 5, name: "" },
{ id: 6, name: "" },
{ id: 7, name: "" },
{ id: 8, name: "" },
{ id: 9, name: "" },
{ id: 10, name: "" },
{ id: 11, name: "" },
]
}
]
};
$scope.battingFirstSelected = function(){
switch ($scope.battingFirst.id) {
case 0:
$scope.battingSecond = $scope.match.teams[1];
case 1:
$scope.battingSecond = $scope.match.teams[0];
}
};
HTML:
Team batting first:
<select
ng-change="battingFirstSelected()"
ng-model="battingFirst"
ng-options="team.name for team in match.teams">
</select>
<div ng-repeat="player in battingFirst.players">
<input
class="form-control"
ng-model="match.teams[battingFirst.id].player.name"
value="" />
</div>
<div ng-repeat="player in match.teams[battingFirst.id].players">
{{ match.teams[battingFirst.id].player.name }}
</div>
The selection of the team works fine, it's just assigning the names that's the problem here.
The output of {{ match.teams[battingFirst.id] }} shows that I'm creating a new team every time I fill in one of the inputs, with a { player: {"name":"sdf"} } object attached to it.
You just need to try:
ng-model="player.name"
Your battingFirst is already a selected team from the above select. When you bind to players in this battingFirst, you bind correctly to players of the selected team.
<div ng-repeat="player in battingFirst.players">
<input
class="form-control"
ng-model="player.name"
value="" />
</div>
The problem you have is because ng-repeat creates child scopes. Therefore match.teams inside your ng-repeat is not the same as the match.teams of your parent scope.