Select-ui removes model object from select options in some versions - angularjs

I have a list of objects that I iterate in the repeat attribute of ui-select.
I bind in the model one of these objects and then it disappears from the select options.
Html-Snippet
<div ui-select="" data-ng-disabled="" data-ng-model="selectedPerson">
<div ui-select-match="" placeholder="Select">
<div>
<span>{{$select.selected.name}}</span>
</div>
</div>
<div ui-select-choices="" data-repeat="person in people" data-scrollable="">
<div>
<span class="itembalance">{{person.name}}</span>
</div>
</div>
</div>
Js-Controller
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.people = [
{ name: 'Adam', email: 'adam#email.com', age: 12, country: 'United States' },
{ name: 'Amalie', email: 'amalie#email.com', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania#email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: 'adrian#email.com', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: 'wladimir#email.com', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: 'samantha#email.com', age: 30, country: 'United States' },
{ name: 'Nicole', email: 'nicole#email.com', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: 'natasha#email.com', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: 'michael#email.com', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: 'nicolas#email.com', age: 43, country: 'Colombia' }
];
$scope.selectedPerson = { name: 'Wladimir', email: 'wladimir#email.com', age: 30, country: 'Ecuador' };
});
Plnkr here
Any idea what is wrong. This started happening after I upgraded to this version. It does not occur with 0.7.* I could not find any changelog that indicated the reason for this.
Target version is 0.17.1

This might be a bug about ui-select. If you set the value after directive is compiled, then there is no problem
$timeout(function() {
$scope.select.selectedPerson = $scope.people[1];
}, 2000);
http://plnkr.co/edit/sGnZcV6ErMPD1R6MG5U0?p=preview
But if you set the default value before it is compiled, then option is removed.

Ok, worked around it and compared the two versions 0.17.1 and 0.18.0
Seems some changes have been done in both. I did not dig too much but setting remover-selected="false" seems to solve the problem. in 0.17.1 this version was set by default to false though now is is set based on uiSelectConfig.
<div ui-select="" data-ng-disabled="" data-ng-model="selectedPerson" remove-selected="false">
Anyone else stumbles upon this, I would recommend going with 0.17.1 though which is mostly the same.

Related

How to generate ID's on my existing data array with 20 id's/users on JavaScript/React

This is my data.js. I want to increment the last existing data to plus 1 if I add another user to my table. I used nanoid from my previous generating ids to my userRows data. But I want my id to increment by 1. For example, the last user that I created has an ID of 20 and I want my next user would be 21. Can someone help me or guide me to fix my generating ids? Thank you in advance.
export const userRows = [
{
id: 1,
username: "Richmond",
fullName: "Richmond Vicente Ramil",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Richmond#gmail.com",
age: 22,
},
{
id: 2,
username: "Fernand",
fullName: "Fernaan Million Galeron",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "passive",
email: "Fernand#gmail.com",
age: 23,
},
{
id: 3,
username: "Jerson",
fullName: "Jerson Tablatin Aganon",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Jerson#gmail.com",
age: 23,
},
{
id: 4,
username: "Jyvonn",
fullName: "Jyvonn Nool Juan",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Jyvonn#gmail.com",
age: 24,
},
{
id: 5,
username: "Mike",
fullName: "Mike Tyson Kid",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "pending",
email: "Mike#gmail.com",
age: 20,
},
{
id: 6,
username: "Mark",
fullName: "Mark Bryant Cleofas",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "passive",
email: "Mark#gmail.com",
age: 26,
},
{
id: 7,
username: "Bryan",
fullName: "Bryan Brenna Tiofelo",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Bryan#gmail.com",
age: 32,
},
{
id: 8,
username: "Jonathan",
fullName: "Jonathan Nool Cleofas",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Jonathan#gmail.com",
age: 19,
},
{
id: 9,
username: "Walter",
fullName: "Walter Mike Mart",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "pending",
email: "Walter#gmail.com",
age: 30,
},
{
id: 10,
username: "Vincent",
fullName: "Vincent Abdul Saudi",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "pending",
email: "Vicent#gmail.com",
age: 42,
},
{
id: 11,
username: "Galeon",
fullName: "Galeon Mark Apollo",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Galeon#gmail.com",
age: 46,
},
{
id: 12,
username: "Brandon",
fullName: "Brandon Vicente Ramil",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "passive",
email: "Brandon#gmail.com",
age: 25,
},
{
id: 13,
username: "Kenneth",
fullName: "Kenneth Timothy Sison",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "passive",
email: "Keneth#gmail.com",
age: 26,
},
{
id: 14,
username: "Alexis",
fullName: "Alexis Delos Santos",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Alexis#gmail.com",
age: 22,
},
{
id: 15,
username: "John",
fullName: "John Kyle Abrera",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "John#gmail.com",
age: 28,
},
{
id: 16,
username: "Patrick",
fullName: "Patrick Martin Nievera",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "pending",
email: "Patrick#gmail.com",
age: 23,
},
{
id: 17,
username: "Steve",
fullName: "Steve Work Job",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Steve#gmail.com",
age: 24,
},
{
id: 18,
username: "Ralph",
fullName: "Ralph Dela Pena",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "passive",
email: "Ralph#gmail.com",
age: 46,
},
{
id: 19,
username: "Chandler",
fullName: "Chandler Dark Mosquito",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Chandler#gmail.com",
age: 29,
},
{
id: 20,
username: "Reyster",
fullName: "Reyster John Car",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/demo-1/images/avatars/3.png",
status: "active",
email: "Reyster#gmail.com",
age: 29,
},
];
I want to generate ID. if I add a new user, the next id will be 21
const newUser = {
//I want to put the next id which is 21 here on my newUser object and id property
//id: ID 21 here ,
username: addFormData.username,
img: file
? URL.createObjectURL(file)
: "https://yt3.ggpht.com/CblhnSj8-Q6Ptr6n8Nq1e3wB4gadeNM_IYjDma89iNfuTrAfsMwogvkPFb6JbG8XS-fdBnN5Plk=s88-c-k-c0x00ffffff-no-rj-mo",
fullName: addFormData.fullName,
email: addFormData.email,
age: addFormData.age,
status: addFormData.status,
};
You can create a function that will receive the last user id and return incremented value, something like that:
function generateNewUserId(users) {
return users[users.length - 1].id + 1;
}
console.log(generateNewUserId(userRows)); // -> "21" for your array
If your data is stored on the backend, you can generate the ID there.
By the way, the first option that could come to mind when implementing this, is to use array.length, but this could create a mess, if you gonna have DELETE user functionality.
What you can do is, use a generator function:
function* generateId() {
let count = 0;
while (true) {
yield ++count;
}
}
const iterator = generateId();
const incrementalId = () => {
const { value } = iterator.next();
if (value) return value;
return -1;
};
Now use the incrementalId function to generate incremental Ids:
export const userRows = [
{
id: incrementalId(), // 1
username: "Richmond",
fullName: "Richmond Vicente Ramil",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-
template/demo-1/images/avatars/3.png",
status: "active",
email: "Richmond#gmail.com",
age: 22,
},
{
id: incrementalId(), // 2
username: "Fernand",
fullName: "Fernaan Million Galeron",
img: "https://demos.themeselection.com/materio-mui-react-nextjs-admin-
template/demo-1/images/avatars/3.png",
status: "passive",
email: "Fernand#gmail.com",
age: 23,
},
// so on...
];
const newUser = {
id: incrementalId(), // 21 (after invoking incrementalId for 20 times)
username: addFormData.username,
img: file
? URL.createObjectURL(file)
: "https://yt3.ggpht.com/CblhnSj8-
Q6Ptr6n8Nq1e3wB4gadeNM_IYjDma89iNfuTrAfsMwogvkPFb6JbG8XS-fdBnN5Plk=s88-
c-k-c0x00ffffff-no-rj-mo",
fullName: addFormData.fullName,
email: addFormData.email,
age: addFormData.age,
status: addFormData.status,
};

How to resolve TypeError: this.state.person is undefined

Hey I am new to react so I am currently learning on about state so I am failing to understand why when I run the code it compiles however when in the browser I get the following error can you please help me understand where I could be going wrong with all this.
Code Below
import React, { Component } from 'react';
import Todo from './Todo';
class App extends Component{
state = [{
person :[{
name: 'Junior',
age: 19,
country: 'South Africa'
}, {
name: 'Max',
age:25,
country: 'America'
}, {
name: 'Angel',
age: 55,
country: 'Germany'
}]
}]
switchNameHandler = () =>{
this.setState({
person :[{
name: 'BEn',
age: 19,
country: 'South Africa'
}, {
name: 'Max',
age:25,
country: 'America'
}, {
name: 'Angel',
age: 55,
country: 'Germany'
}]})
}
render(){
return(
<div>
<button onClick{this.switchNameHandler}/>
<Todo name={this.state.person[0].name} age={this.state.person[0].age} country= {this.state.person[0].country}/>
<Todo name={this.state.person[1].name} age={this.state.person[1].age} country={this.state.person[1].country}/>
<Todo name={this.state.person[2].name} age={this.state.person[2].age} country={this.state.person[2].country}/>
</div>
)
}
}
export default App;
I think you are reading too much into it. State has no magical properties besides the fact that it is immutable.
You are simply using the wrong data structures.
You are setting your initial state with an array that has a single object with a nested array of 'person' objects. Instead of troubleshooting why you are not understanding the react state, you should be thinking about how you can use the data structure you have created.
this.state[0].person[0].name
That would get you what you are looking for. It is not the most elegant way of access this data (even if you intended to iterate over it).
Based on how you are trying to access your state you should remap it as so:
state = { person: [{name: '', age: '', country: ''}] }
Don't overthink react and state. It is just Javascript.
From initial state, you can remove the [] from state to make it work. State is supposed to be object.
state = {
person :[{
name: 'Junior',
age: 19,
country: 'South Africa'
}, {
name: 'Max',
age:25,
country: 'America'
}, {
name: 'Angel',
age: 55,
country: 'Germany'
}]
}

How do I put an object inside another object based on the same key?

I am working with Reactjs and my data looks like this:
const this.state.singlePost = [{
name: 'Johnny',
age: 20,
birthPlace: 'Germany'
},
{
name: 'Samuel',
age: 22,
birthPlace: 'France'
}
]
let this.state.post = [{
email: 'john#gm.co',
number: 4567887654
},
{
email: 'samuel#gm.co',
number: 0987655881
},
]
I want to make something like this:
let editedPost = [{
name: 'Johnny',
age: 20,
birthPlace: 'Germany',
email: 'john#gm.co',
number: 4567887654
},
{
name: 'Samuel',
age: 22,
birthPlace: 'France',
email: 'samuel#gm.co',
number: 0987655881
}
]
It might be a stupid question, but I got stuck for a few hours on this, Could somebody help me please? I have 5 items in this.state.singlePost and 10 items in this.state.post. How do I put the stuff in this.state.singlePost into this.state.post just like the way I did in editedPost?
In theory, you would have a common key between the two objects that you would be able to merge on as without you will be relying on matching the index of objects.
let post = [
{email: 'john#gm.co',
number: 4567887654},
{email: 'samuel#gm.co',
number: 987655881}
]
let singlePost = [
{name: 'Johnny', age: 20, birthPlace: 'Germany'},
{name: 'Samuel', age: 22, birthPlace: 'France'}
]
let newList = post.map((item, i) => ({...item, ...singlePost[i]}))
console.log(newList)
Output:
[
{
email:"john#gm.co",
number:4567887654,
name:"Johnny",
age:20,
birthPlace:"Germany"
},
{
email:"samuel#gm.co",
number:987655881,
name:"Samuel",
age:22,
birthPlace:"France"
}
]
There is many ways to do this in Javascript. The way I chose prevents mutation of data, which may be something you are concerned with when using React.

$route.reload not updating service data

I am very much new to AngularJS.
Generally I have seen people using $route for refreshing data from database. But for learning purpose I have created an object in the custom service, stored some data in the Object and calling that service in the controller.
But when I am adding more values in the object and try to update it using the ngClick, no changes take place. Though, on refreshing the whole page, changes takes place. But I just want that particular section to update.
Here's my JavaScript code:
var app=angular
.module('app',['ngRoute'])
.service('data', function(){
this.students=[
{id: 1, name: 'Mark', gender: 'Male', city: 'London'},
{id: 2, name: 'Henry', gender: 'Male', city: 'Manchester'},
{id: 3, name: 'John', gender: 'Male', city: 'Chennai'},
{id: 4, name: 'Sara', gender: 'Female', city: 'Sydney'},
{id: 5, name: 'Tom', gender: 'Male', city: 'New York'},
{id: 6, name: 'Pam', gender: 'Male', city: 'Los Angeles'},
{id: 7, name: 'Catherine', gender: 'Female', city: 'Chicago'},
{id: 8, name: 'Mary', gender: 'Female', city: 'Houston'},
{id: 9, name: 'Mike', gender: 'Male', city: 'Phoenix'},
{id: 10, name: 'Rosie', gender: 'Female', city: 'Manchester'},
{id: 11, name: 'Sasha', gender: 'Female', city: 'Hyderabad'},
{id: 12, name: 'Naatasha', gender: 'Female', city: 'Bhungi'},
// {id: 13, name: 'akash', gender: 'Male', city: 'lugi'},
// {id: 14, name: 'aaakash', gender: 'Male', city: 'lugi'}
];
})
.controller('studentcontroller',function($scope,data,$route){
$scope.rdata=function(){
console.log("asd");
$route.reload();
};
$scope.students=data.students;
});
Here's the code calling it
<h1>List of Students</h1>
<ul>
<li ng-repeat="student in students">
{{student.name}}
</li>
</ul>
<button ng-click="rdata()">Reload Data</button>
Please help me in learning something new.

loading ng-grid with ng-click

I am trying to load an ng-grid when a button is clicked but it is not working.
But it works well on load. Why?
HTML:
Load Grid
<div ng-grid="ngOptions"></div>
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
$scope.loadGrid = funtion(){
$scope.ngOptions = { data: 'ngData' };
};
You can initialize the data with an empty array, so that ng-grid is proparly initialized, and then change the data on-click like this:
$scope.myData = [];
$scope.ngOptions = { data: 'myData' };
$scope.loadGrid = function(){
$scope.myData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
};
Here's a working plunker
Please check this http://plnkr.co/edit/8H4NHFP59gWTxURwQKZw?p=preview
HTML :
Load Grid
<div ng-show="ngData.length">
<div ng-grid="ngOptions" ></div>
</div>
Controller
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.ngData = [];
$scope.ngOptions = {
data: 'ngData'
};
$scope.loadGrid = function() {
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
}
});

Resources