Table without using bootstrap in AngularJS - angularjs

This is my angular js code
var app = angular.module('DemoApp', []);
app.controller('DemoController', function ($scope) {
$scope.name = [
{ Country: "India", Capital: "New Delhi" },
{ Country: "China", Capital: "Beijing" },
{ Country: "Japan", Capital: "Tokyo" },
{ Country: "France", Capital: "Paris" },
{ Country: "Russia", Capital: "Moscow" },
{ Country: "Nepal", Capital: "Kathmandu" },
{ Country: "England", Capital: "London" },
{ Country: "Belgium", Capital: "Brussels" },
{ Country: "Greece", Capital: "Athens" },
{ Country: "Portugal", Capital: "Lisbon" }]
});
I want to do without bootstrap


You can use a ng-repeat to create a table in angularjs. You can then style your table according to your requirements using css if you don't want to use bootstrap.
var app = angular.module('DemoApp', []);
app.controller('DemoController', function ($scope) {
$scope.countries = [
{ Country: "India", Capital: "New Delhi" },
{ Country: "China", Capital: "Beijing" },
{ Country: "Japan", Capital: "Tokyo" },
{ Country: "France", Capital: "Paris" },
{ Country: "Russia", Capital: "Moscow" },
{ Country: "Nepal", Capital: "Kathmandu" },
{ Country: "England", Capital: "London" },
{ Country: "Belgium", Capital: "Brussels" },
{ Country: "Greece", Capital: "Athens" },
{ Country: "Portugal", Capital: "Lisbon" }]
});
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<title>Table</title>
</head>
<div ng-app="DemoApp" ng-controller="DemoController">
<table>
<tr><th>{{ Country}}</th>
<th>{{ Capital }}</th></tr>
<tr ng-repeat="x in countries">
<td>{{ x.Country }}</td>
<td>{{ x.Capital }}</td>
</tr>
</table>
</div>

Related

merging the rows and displaying it in mantine table in react

import { Table } from "#mantine/core";
import React from "react";
interface TableProps {
columns: ColumnProps[];
data: {
[key: string]: string | number;
}[];
group: string[];
}
interface ColumnProps {
key: string;
label: string;
actions?: React.ReactNode;
}
export const RowGrouping = ({ columns, data, group }: TableProps) => {
columns = [
{
key: "state_name",
label: "State",
},
{
key: "district",
label: "District",
},
{
key: "gender",
label: "Gender",
},
];
data = [
{
state_name: "Karnataka",
district: "Banglore",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Banglore",
gender: "girls",
},
{
state_name: "Telangana",
district: "Hyderabad",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Mysore",
gender: "Girls",
},
{
state_name: "Karnataka",
district: "Mysore",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Manglore",
gender: "Transgender",
},
{
state_name: "Goa",
district: "North",
gender: "Girls",
},
{
state_name: "Andhra Pradesh",
district: "Chittor",
gender: "Boys",
},
{
state_name: "Andhra Pradesh",
district: "Chittor",
gender: "Girls",
},
{
state_name: "Goa",
district: "South",
gender: "Transgender",
},
{
state_name: "Andhra Pradesh",
district: "Vizag",
gender: "Boys",
},
];
group = ["state_name", "district"];
const mergeData = data.reduce((a, b) => {
const similar = a.find((e) => e.state_name == b.state_name);
return similar ? similar.district.push(b.district) : a.push({ ...b, district: [b.district] }), a;
}, []);
const tableHead = () => {
return (
<tr>
{columns.map((c, index) => (
<th key={index}>{c.label}</th>
))}
</tr>
);
};
const tableData = () => {
return (
<>
{mergeData.map((c, index) => (
<tr key={index}>
<td>{c.state_name}</td>
{c.district.map((d, i) => (
<tr key={i}>
<tr>
<td>{d}</td>
</tr>
</tr>
))}
</tr>
))}
</>
);
};
return (
<div>
<Table withBorder withColumnBorders style={{ width: "50%", margin: "0 auto", marginTop: "50px" }}>
<thead>{tableHead()}</thead>
<tbody>{tableData()}</tbody>
</Table>
</div>
);
};
Here in this example, what I'm trying to do is that I have three columns - state, district and gender, and I'm trying to group the rows and display it in table. but I'm able to group only one column that is state but I'm unable to group district wise, and I don't know how to generalize this without hardcode means data columns should be grouped for any data by column name and displayed in table.[ this is the output I'm getting but i want the districts to be displayed properly means inside karnataka rowspan there should be only banglore, mysore and manglore and inside banglore rowspan there should be boys and girls and same for mysore and chittor as well without hardcoded. please help...

You could adjust your merge fn so that it only pushes the district if it's not already in the district array.
const mergeData = data.reduce((a, b) => {
const similar = a.find((e) => e.state_name == b.state_name);
return (
similar
? !similar.district.includes(b.district) &&
similar.district.push(b.district)
: a.push({
...b,
district: [b.district],
}),
a
);
}, []);
Output :
[
{
district: ["Banglore", "Mysore", "Manglore"],
gender: "Boys",
state_name: "Karnataka",
},
{
district: ["Hyderabad"],
gender: "Boys",
state_name: "Telangana",
},
{
district: ["North", "South"],
gender: "Girls",
state_name: "Goa",
},
{
district: ["Chittor", "Vizag"],
gender: "Boys",
state_name: "Andhra Pradesh",
},
];
Fiddle : https://jsfiddle.net/RyanZee/bnh6u7mx/4/
As for the gender being displayed, you're not returning it in your map:
{
mergeData.map((c, index) => (
<tr key={index}>
<td>{c.state_name}</td>
{c.district.map((d, i) => (
<tr key={i}>
<tr>
<td>{d}</td>
</tr>
</tr>
))}
<td>{c.gender}</td>
</tr>
));
}

how to get react material mui select countries default value

Hello I'm using the code below which is from:
https://mui.com/material-ui/react-autocomplete/#country-select
to create my countries select dropdown however I can not figure out how to get a default value of the Unite States selected so that when it loads it now longer says select a country but selects the us as the default value. Thank you!
import * as React from "react";
import Box from "#mui/material/Box";
import TextField from "#mui/material/TextField";
import Autocomplete from "#mui/material/Autocomplete";
import InputAdornment from "#mui/material/InputAdornment";
export default function CountrySelect() {
const [value, setValue] = React.useState(null);
const [open, setOpen] = React.useState(false);
return (
<Autocomplete
id="country-select-demo"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
sx={{ }}
options={countries}
autoHighlight
defaultValue={{
code: 'US',
label: 'United States',
phone: '1',
suggested: true,
}}
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
getOptionLabel={(option) => option.label}
renderOption={(props, option) => (
<Box
component="li"
sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
{...props}
>
<img
loading="lazy"
width="20"
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
alt=""
/>
{option.label} ({option.code}) +{option.phone}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
inputProps={{
...params.inputProps,
autoComplete: "new-password" // disable autocomplete and autofill
}}
InputProps={{
...params.InputProps,
startAdornment: value ? (
<InputAdornment position="start" onClick={() => setOpen(true)}>
<img
loading="lazy"
width="20"
src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`}
srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`}
alt=""
/>
</InputAdornment>
) : null
}}
/>
)}
/>
);
}
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const countries = [
{ code: "AD", label: "Andorra", phone: "376" },
{
code: "AE",
label: "United Arab Emirates",
phone: "971"
},
{ code: "AF", label: "Afghanistan", phone: "93" },
{
code: "AG",
label: "Antigua and Barbuda",
phone: "1-268"
},
{ code: "AI", label: "Anguilla", phone: "1-264" },
{ code: "AL", label: "Albania", phone: "355" },
{ code: "AM", label: "Armenia", phone: "374" },
{ code: "AO", label: "Angola", phone: "244" },
{ code: "AQ", label: "Antarctica", phone: "672" },
{ code: "AR", label: "Argentina", phone: "54" },
{ code: "AS", label: "American Samoa", phone: "1-684" },
{ code: "AT", label: "Austria", phone: "43" },
{
code: "AU",
label: "Australia",
phone: "61",
suggested: true
},
{ code: "AW", label: "Aruba", phone: "297" },
{ code: "AX", label: "Alland Islands", phone: "358" },
{ code: "AZ", label: "Azerbaijan", phone: "994" },
{
code: "BA",
label: "Bosnia and Herzegovina",
phone: "387"
},
{ code: "BB", label: "Barbados", phone: "1-246" },
{ code: "BD", label: "Bangladesh", phone: "880" },
{ code: "BE", label: "Belgium", phone: "32" },
{ code: "BF", label: "Burkina Faso", phone: "226" },
{ code: "BG", label: "Bulgaria", phone: "359" },
{ code: "BH", label: "Bahrain", phone: "973" },
{ code: "BI", label: "Burundi", phone: "257" },
{ code: "BJ", label: "Benin", phone: "229" },
{ code: "BL", label: "Saint Barthelemy", phone: "590" },
{ code: "BM", label: "Bermuda", phone: "1-441" },
{ code: "BN", label: "Brunei Darussalam", phone: "673" },
{ code: "BO", label: "Bolivia", phone: "591" },
{ code: "BR", label: "Brazil", phone: "55" },
{ code: "BS", label: "Bahamas", phone: "1-242" },
{ code: "BT", label: "Bhutan", phone: "975" },
{ code: "BV", label: "Bouvet Island", phone: "47" },
{ code: "BW", label: "Botswana", phone: "267" },
{ code: "BY", label: "Belarus", phone: "375" },
{ code: "BZ", label: "Belize", phone: "501" },
{
code: "CA",
label: "Canada",
phone: "1",
suggested: true
},
{
code: "CC",
label: "Cocos (Keeling) Islands",
phone: "61"
},
{
code: "CD",
label: "Congo, Democratic Republic of the",
phone: "243"
},
{
code: "CF",
label: "Central African Republic",
phone: "236"
},
{
code: "CG",
label: "Congo, Republic of the",
phone: "242"
},
{ code: "CH", label: "Switzerland", phone: "41" },
{ code: "CI", label: "Cote d'Ivoire", phone: "225" },
{ code: "CK", label: "Cook Islands", phone: "682" },
{ code: "CL", label: "Chile", phone: "56" },
{ code: "CM", label: "Cameroon", phone: "237" },
{ code: "CN", label: "China", phone: "86" },
{ code: "CO", label: "Colombia", phone: "57" },
{ code: "CR", label: "Costa Rica", phone: "506" },
{ code: "CU", label: "Cuba", phone: "53" },
{ code: "CV", label: "Cape Verde", phone: "238" },
{ code: "CW", label: "Curacao", phone: "599" },
{ code: "CX", label: "Christmas Island", phone: "61" },
{ code: "CY", label: "Cyprus", phone: "357" },
{ code: "CZ", label: "Czech Republic", phone: "420" },
{
code: "DE",
label: "Germany",
phone: "49",
suggested: true
},
{ code: "DJ", label: "Djibouti", phone: "253" },
{ code: "DK", label: "Denmark", phone: "45" },
{ code: "DM", label: "Dominica", phone: "1-767" },
{
code: "DO",
label: "Dominican Republic",
phone: "1-809"
},
{ code: "DZ", label: "Algeria", phone: "213" },
{ code: "EC", label: "Ecuador", phone: "593" },
{ code: "EE", label: "Estonia", phone: "372" },
{ code: "EG", label: "Egypt", phone: "20" },
{ code: "EH", label: "Western Sahara", phone: "212" },
{ code: "ER", label: "Eritrea", phone: "291" },
{ code: "ES", label: "Spain", phone: "34" },
{ code: "ET", label: "Ethiopia", phone: "251" },
{ code: "FI", label: "Finland", phone: "358" },
{ code: "FJ", label: "Fiji", phone: "679" },
{
code: "FK",
label: "Falkland Islands (Malvinas)",
phone: "500"
},
{
code: "FM",
label: "Micronesia, Federated States of",
phone: "691"
},
{ code: "FO", label: "Faroe Islands", phone: "298" },
{
code: "FR",
label: "France",
phone: "33",
suggested: true
},
{ code: "GA", label: "Gabon", phone: "241" },
{ code: "GB", label: "United Kingdom", phone: "44" },
{ code: "GD", label: "Grenada", phone: "1-473" },
{ code: "GE", label: "Georgia", phone: "995" },
{ code: "GF", label: "French Guiana", phone: "594" },
{ code: "GG", label: "Guernsey", phone: "44" },
{ code: "GH", label: "Ghana", phone: "233" },
{ code: "GI", label: "Gibraltar", phone: "350" },
{ code: "GL", label: "Greenland", phone: "299" },
{ code: "GM", label: "Gambia", phone: "220" },
{ code: "GN", label: "Guinea", phone: "224" },
{ code: "GP", label: "Guadeloupe", phone: "590" },
{ code: "GQ", label: "Equatorial Guinea", phone: "240" },
{ code: "GR", label: "Greece", phone: "30" },
{
code: "GS",
label: "South Georgia and the South Sandwich Islands",
phone: "500"
},
{ code: "GT", label: "Guatemala", phone: "502" },
{ code: "GU", label: "Guam", phone: "1-671" },
{ code: "GW", label: "Guinea-Bissau", phone: "245" },
{ code: "GY", label: "Guyana", phone: "592" },
{ code: "HK", label: "Hong Kong", phone: "852" },
{
code: "HM",
label: "Heard Island and McDonald Islands",
phone: "672"
},
{ code: "HN", label: "Honduras", phone: "504" },
{ code: "HR", label: "Croatia", phone: "385" },
{ code: "HT", label: "Haiti", phone: "509" },
{ code: "HU", label: "Hungary", phone: "36" },
{ code: "ID", label: "Indonesia", phone: "62" },
{ code: "IE", label: "Ireland", phone: "353" },
{ code: "IL", label: "Israel", phone: "972" },
{ code: "IM", label: "Isle of Man", phone: "44" },
{ code: "IN", label: "India", phone: "91" },
{
code: "IO",
label: "British Indian Ocean Territory",
phone: "246"
},
{ code: "IQ", label: "Iraq", phone: "964" },
{
code: "IR",
label: "Iran, Islamic Republic of",
phone: "98"
},
{ code: "IS", label: "Iceland", phone: "354" },
{ code: "IT", label: "Italy", phone: "39" },
{ code: "JE", label: "Jersey", phone: "44" },
{ code: "JM", label: "Jamaica", phone: "1-876" },
{ code: "JO", label: "Jordan", phone: "962" },
{
code: "JP",
label: "Japan",
phone: "81",
suggested: true
},
{ code: "KE", label: "Kenya", phone: "254" },
{ code: "KG", label: "Kyrgyzstan", phone: "996" },
{ code: "KH", label: "Cambodia", phone: "855" },
{ code: "KI", label: "Kiribati", phone: "686" },
{ code: "KM", label: "Comoros", phone: "269" },
{
code: "KN",
label: "Saint Kitts and Nevis",
phone: "1-869"
},
{
code: "KP",
label: "Korea, Democratic People's Republic of",
phone: "850"
},
{ code: "KR", label: "Korea, Republic of", phone: "82" },
{ code: "KW", label: "Kuwait", phone: "965" },
{ code: "KY", label: "Cayman Islands", phone: "1-345" },
{ code: "KZ", label: "Kazakhstan", phone: "7" },
{
code: "LA",
label: "Lao People's Democratic Republic",
phone: "856"
},
{ code: "LB", label: "Lebanon", phone: "961" },
{ code: "LC", label: "Saint Lucia", phone: "1-758" },
{ code: "LI", label: "Liechtenstein", phone: "423" },
{ code: "LK", label: "Sri Lanka", phone: "94" },
{ code: "LR", label: "Liberia", phone: "231" },
{ code: "LS", label: "Lesotho", phone: "266" },
{ code: "LT", label: "Lithuania", phone: "370" },
{ code: "LU", label: "Luxembourg", phone: "352" },
{ code: "LV", label: "Latvia", phone: "371" },
{ code: "LY", label: "Libya", phone: "218" },
{ code: "MA", label: "Morocco", phone: "212" },
{ code: "MC", label: "Monaco", phone: "377" },
{
code: "MD",
label: "Moldova, Republic of",
phone: "373"
},
{ code: "ME", label: "Montenegro", phone: "382" },
{
code: "MF",
label: "Saint Martin (French part)",
phone: "590"
},
{ code: "MG", label: "Madagascar", phone: "261" },
{ code: "MH", label: "Marshall Islands", phone: "692" },
{
code: "MK",
label: "Macedonia, the Former Yugoslav Republic of",
phone: "389"
},
{ code: "ML", label: "Mali", phone: "223" },
{ code: "MM", label: "Myanmar", phone: "95" },
{ code: "MN", label: "Mongolia", phone: "976" },
{ code: "MO", label: "Macao", phone: "853" },
{
code: "MP",
label: "Northern Mariana Islands",
phone: "1-670"
},
{ code: "MQ", label: "Martinique", phone: "596" },
{ code: "MR", label: "Mauritania", phone: "222" },
{ code: "MS", label: "Montserrat", phone: "1-664" },
{ code: "MT", label: "Malta", phone: "356" },
{ code: "MU", label: "Mauritius", phone: "230" },
{ code: "MV", label: "Maldives", phone: "960" },
{ code: "MW", label: "Malawi", phone: "265" },
{ code: "MX", label: "Mexico", phone: "52" },
{ code: "MY", label: "Malaysia", phone: "60" },
{ code: "MZ", label: "Mozambique", phone: "258" },
{ code: "NA", label: "Namibia", phone: "264" },
{ code: "NC", label: "New Caledonia", phone: "687" },
{ code: "NE", label: "Niger", phone: "227" },
{ code: "NF", label: "Norfolk Island", phone: "672" },
{ code: "NG", label: "Nigeria", phone: "234" },
{ code: "NI", label: "Nicaragua", phone: "505" },
{ code: "NL", label: "Netherlands", phone: "31" },
{ code: "NO", label: "Norway", phone: "47" },
{ code: "NP", label: "Nepal", phone: "977" },
{ code: "NR", label: "Nauru", phone: "674" },
{ code: "NU", label: "Niue", phone: "683" },
{ code: "NZ", label: "New Zealand", phone: "64" },
{ code: "OM", label: "Oman", phone: "968" },
{ code: "PA", label: "Panama", phone: "507" },
{ code: "PE", label: "Peru", phone: "51" },
{ code: "PF", label: "French Polynesia", phone: "689" },
{ code: "PG", label: "Papua New Guinea", phone: "675" },
{ code: "PH", label: "Philippines", phone: "63" },
{ code: "PK", label: "Pakistan", phone: "92" },
{ code: "PL", label: "Poland", phone: "48" },
{
code: "PM",
label: "Saint Pierre and Miquelon",
phone: "508"
},
{ code: "PN", label: "Pitcairn", phone: "870" },
{ code: "PR", label: "Puerto Rico", phone: "1" },
{
code: "PS",
label: "Palestine, State of",
phone: "970"
},
{ code: "PT", label: "Portugal", phone: "351" },
{ code: "PW", label: "Palau", phone: "680" },
{ code: "PY", label: "Paraguay", phone: "595" },
{ code: "QA", label: "Qatar", phone: "974" },
{ code: "RE", label: "Reunion", phone: "262" },
{ code: "RO", label: "Romania", phone: "40" },
{ code: "RS", label: "Serbia", phone: "381" },
{ code: "RU", label: "Russian Federation", phone: "7" },
{ code: "RW", label: "Rwanda", phone: "250" },
{ code: "SA", label: "Saudi Arabia", phone: "966" },
{ code: "SB", label: "Solomon Islands", phone: "677" },
{ code: "SC", label: "Seychelles", phone: "248" },
{ code: "SD", label: "Sudan", phone: "249" },
{ code: "SE", label: "Sweden", phone: "46" },
{ code: "SG", label: "Singapore", phone: "65" },
{ code: "SH", label: "Saint Helena", phone: "290" },
{ code: "SI", label: "Slovenia", phone: "386" },
{
code: "SJ",
label: "Svalbard and Jan Mayen",
phone: "47"
},
{ code: "SK", label: "Slovakia", phone: "421" },
{ code: "SL", label: "Sierra Leone", phone: "232" },
{ code: "SM", label: "San Marino", phone: "378" },
{ code: "SN", label: "Senegal", phone: "221" },
{ code: "SO", label: "Somalia", phone: "252" },
{ code: "SR", label: "Suriname", phone: "597" },
{ code: "SS", label: "South Sudan", phone: "211" },
{
code: "ST",
label: "Sao Tome and Principe",
phone: "239"
},
{ code: "SV", label: "El Salvador", phone: "503" },
{
code: "SX",
label: "Sint Maarten (Dutch part)",
phone: "1-721"
},
{
code: "SY",
label: "Syrian Arab Republic",
phone: "963"
},
{ code: "SZ", label: "Swaziland", phone: "268" },
{
code: "TC",
label: "Turks and Caicos Islands",
phone: "1-649"
},
{ code: "TD", label: "Chad", phone: "235" },
{
code: "TF",
label: "French Southern Territories",
phone: "262"
},
{ code: "TG", label: "Togo", phone: "228" },
{ code: "TH", label: "Thailand", phone: "66" },
{ code: "TJ", label: "Tajikistan", phone: "992" },
{ code: "TK", label: "Tokelau", phone: "690" },
{ code: "TL", label: "Timor-Leste", phone: "670" },
{ code: "TM", label: "Turkmenistan", phone: "993" },
{ code: "TN", label: "Tunisia", phone: "216" },
{ code: "TO", label: "Tonga", phone: "676" },
{ code: "TR", label: "Turkey", phone: "90" },
{
code: "TT",
label: "Trinidad and Tobago",
phone: "1-868"
},
{ code: "TV", label: "Tuvalu", phone: "688" },
{
code: "TW",
label: "Taiwan, Province of China",
phone: "886"
},
{
code: "TZ",
label: "United Republic of Tanzania",
phone: "255"
},
{ code: "UA", label: "Ukraine", phone: "380" },
{ code: "UG", label: "Uganda", phone: "256" },
{
code: "US",
label: "United States",
phone: "1",
suggested: true
},
{ code: "UY", label: "Uruguay", phone: "598" },
{ code: "UZ", label: "Uzbekistan", phone: "998" },
{
code: "VA",
label: "Holy See (Vatican City State)",
phone: "379"
},
{
code: "VC",
label: "Saint Vincent and the Grenadines",
phone: "1-784"
},
{ code: "VE", label: "Venezuela", phone: "58" },
{
code: "VG",
label: "British Virgin Islands",
phone: "1-284"
},
{
code: "VI",
label: "US Virgin Islands",
phone: "1-340"
},
{ code: "VN", label: "Vietnam", phone: "84" },
{ code: "VU", label: "Vanuatu", phone: "678" },
{ code: "WF", label: "Wallis and Futuna", phone: "681" },
{ code: "WS", label: "Samoa", phone: "685" },
{ code: "XK", label: "Kosovo", phone: "383" },
{ code: "YE", label: "Yemen", phone: "967" },
{ code: "YT", label: "Mayotte", phone: "262" },
{ code: "ZA", label: "South Africa", phone: "27" },
{ code: "ZM", label: "Zambia", phone: "260" },
{ code: "ZW", label: "Zimbabwe", phone: "263" }
];

You need to remove value from your code because you are using hook
for value,
You must to set only default value
<Autocomplete
id="country-select-demo"
**remove this ---->** value={value}
**remove this ---->** onChange={(event, newValue) => {
setValue(newValue);
}}
sx={{ }}
options={countries}
autoHighlight
defaultValue={{
code: 'US',
label: 'United States',
phone: '1',
suggested: true,
}}
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
getOptionLabel={(option) => option.label}
....
/>
use submit form to get the value from your autocomplete

In the Autocomplete docs it looks like there's a defaultValue prop you can use, like this:
<Autocomplete
id="country-select-demo"
options={countries}
defaultValue={{
code: 'AE',
label: 'United Arab Emirates',
phone: '971',
}}
...{otherProps}
/>
So I believe you can just separate out whatever you want as the default (I think you want the US data) and set that in that prop.
Here's an example sandbox using that prop: https://codesandbox.io/s/serene-banzai-4p7974 (check out the demo.tsx file)

How to filter multiple JSON Data with AngularJs?

My JSON file
{
records: [
{
Name: "Alfreds Futterkiste",
City: "Berlin",
Country: "Germany"
},
{
Name: "Ana Trujillo Emparedados y helados",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Antonio Moreno Taquería",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Around the Horn",
City: "London",
Country: "UK"
}
]
}
How can I filter only name of user with Country: "Mexico" or "Germany" with AngularJS ?

If you care about performance you should better no use $filter provider. Instead you should go for a custom code.
You should better maintain a list of filtered records.
<div ng-controller="AppController as app">
<label ng-repeat="country in app.availableCountries track by $index">
<input type="checkbox" ng-model="country.selected" ng-click="app.filterByCountries()"> {{country.name}}
</label>
<h2>Filtered Records</h2>
<div ng-repeat="record in app.filteredRecords">
{{record | json}}
</div>
</div>
And perform filtering functionality in your controller.
angular.module('app', [])
.controller("AppController", function() {
this.records = [{
Name: "Alfreds Futterkiste",
City: "Berlin",
Country: "Germany"
}, {
Name: "Ana Trujillo Emparedados y helados",
City: "México D.F.",
Country: "Mexico"
}, {
Name: "Antonio Moreno Taquería",
City: "México D.F.",
Country: "Mexico"
}, {
Name: "Around the Horn",
City: "London",
Country: "UK"
}];
this.filteredRecords = [];
this.availableCountries = _.uniq(this.records.map(record => record.Country)).map(country => {
return {
name: country
}
});
this.filterByCountries = () => {
const lowerCaseCountries = this.availableCountries.filter(country => country.selected).map(country => country.name.toLowerCase());
if (!lowerCaseCountries.length) {
this.filteredRecords = angular.copy(this.records);
return;
}
this.filteredRecords = angular.copy(this.records.filter(record => lowerCaseCountries.includes(record.Country.toLowerCase())));
}
this.filterByCountries();
})
Here's a working fiddle demonstrating your case. Feel free to ask anything.

Try this ..
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.data = records: [
{
Name: "Alfreds Futterkiste",
City: "Berlin",
Country: "Germany"
},
{
Name: "Ana Trujillo Emparedados y helados",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Antonio Moreno Taquería",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Around the Horn",
City: "London",
Country: "UK"
}
];
$scope.filteredData = $scope.data.filter(function(d) {
return d.Country === 'Mexico' || d.Country === 'Germany'
});
});

I want to bind id to the ng-model and display name in the input box using uib-typeahead directive

I want to bind id to the ng-model and display name in the input box using uib-typeahead directive. uibtypeahead directive is used from bootstrap.tpls.js file.How can i get this..
<head>
<meta charset="UTF-8">
<title>dynamic form</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="SearchController">
<!-- in uib-typeahead specify that property / attribute name which you want to display in drop down
in filter service specify an object with which you want to compare
for example if you want to compare this object by type then
filter : { type : $viewValue }
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8">
</body>
</html>
controller code of ....
var app = angular.module('search', ['ui.bootstrap']);
app.controller('SearchController', function ($scope){
$scope.selected="";
// Set your object
$scope.objects = [
{id:1, name : 'Dilip', type :{ title : 'a'}},
{id:2, name : 'Devendra', type :{ title : 'b'}},
{id:3, name : 'Jayesh', type :{ title : 'a'}},
{id:4, name : 'Jekin', type :{ title : 'c'}},
{id:5, name : 'Gaurang', type :{ title : 'a'}},
{id:6, name : 'Bhavin', type :{ title : 'e'}},
];
});

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.formatLabel = function(model) {
for (var i=0; i< $scope.states.length; i++) {
if (model === $scope.states[i].abbreviation) {
return $scope.states[i].name;
}
}
}
$scope.states = [
{
name: "Alabama",
abbreviation: "AL"
},
{
name: "Alaska",
abbreviation: "AK"
},
{
name: "American Samoa",
abbreviation: "AS"
},
{
name: "Arizona",
abbreviation: "AZ"
},
{
name: "Arkansas",
abbreviation: "AR"
},
{
name: "California",
abbreviation: "CA"
},
{
name: "Colorado",
abbreviation: "CO"
},
{
name: "Connecticut",
abbreviation: "CT"
},
{
name: "Delaware",
abbreviation: "DE"
},
{
name: "District Of Columbia",
abbreviation: "DC"
},
{
name: "Federated States Of Micronesia",
abbreviation: "FM"
},
{
name: "Florida",
abbreviation: "FL"
},
{
name: "Georgia",
abbreviation: "GA"
},
{
name: "Guam",
abbreviation: "GU"
},
{
name: "Hawaii",
abbreviation: "HI"
},
{
name: "Idaho",
abbreviation: "ID"
},
{
name: "Illinois",
abbreviation: "IL"
},
{
name: "Indiana",
abbreviation: "IN"
},
{
name: "Iowa",
abbreviation: "IA"
},
{
name: "Kansas",
abbreviation: "KS"
},
{
name: "Kentucky",
abbreviation: "KY"
},
{
name: "Louisiana",
abbreviation: "LA"
},
{
name: "Maine",
abbreviation: "ME"
},
{
name: "Marshall Islands",
abbreviation: "MH"
},
{
name: "Maryland",
abbreviation: "MD"
},
{
name: "Massachusetts",
abbreviation: "MA"
},
{
name: "Michigan",
abbreviation: "MI"
},
{
name: "Minnesota",
abbreviation: "MN"
},
{
name: "Mississippi",
abbreviation: "MS"
},
{
name: "Missouri",
abbreviation: "MO"
},
{
name: "Montana",
abbreviation: "MT"
},
{
name: "Nebraska",
abbreviation: "NE"
},
{
name: "Nevada",
abbreviation: "NV"
},
{
name: "New Hampshire",
abbreviation: "NH"
},
{
name: "New Jersey",
abbreviation: "NJ"
},
{
name: "New Mexico",
abbreviation: "NM"
},
{
name: "New York",
abbreviation: "NY"
},
{
name: "North Carolina",
abbreviation: "NC"
},
{
name: "North Dakota",
abbreviation: "ND"
},
{
name: "Northern Mariana Islands",
abbreviation: "MP"
},
{
name: "Ohio",
abbreviation: "OH"
},
{
name: "Oklahoma",
abbreviation: "OK"
},
{
name: "Oregon",
abbreviation: "OR"
},
{
name: "Palau",
abbreviation: "PW"
},
{
name: "Pennsylvania",
abbreviation: "PA"
},
{
name: "Puerto Rico",
abbreviation: "PR"
},
{
name: "Rhode Island",
abbreviation: "RI"
},
{
name: "South Carolina",
abbreviation: "SC"
},
{
name: "South Dakota",
abbreviation: "SD"
},
{
name: "Tennessee",
abbreviation: "TN"
},
{
name: "Texas",
abbreviation: "TX"
},
{
name: "Utah",
abbreviation: "UT"
},
{
name: "Vermont",
abbreviation: "VT"
},
{
name: "Virgin Islands",
abbreviation: "VI"
},
{
name: "Virginia",
abbreviation: "VA"
},
{
name: "Washington",
abbreviation: "WA"
},
{
name: "West Virginia",
abbreviation: "WV"
},
{
name: "Wisconsin",
abbreviation: "WI"
},
{
name: "Wyoming",
abbreviation: "WY"
}
];
}
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state.abbreviation as state.name for state in states | filter:$viewValue | limitTo:8" typeahead-input-formatter="formatLabel($model)">
</div>
</body>
</html>

AngularJS: How to bind properties of an object to scope

I am new to use AngularJS and I am an absolute beginner. I tried using filters. I tried binding to the properties instead of directly binding the object. But the code shows {{x.people}} as the output instead of showing the list. What am I missing out here?
<!DOCTYPE html>
<html>
<head>
<title>ANGULAR APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myFirstController">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people">
{{ x.name }}
</li>
</ul>
</body>
<script>
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
];
};
}
app.controller('myFirstController', myFirstController);
</script>
</html>

there is an unnecessary ; at the end of your json data:
$scope.model = {
people:[
... // your data
{name:'Kai',country:'Norway'}]; // <------ here the ; is illegal
};
}
refer below fixed example:
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
]
};
}
app.controller('myFirstController', myFirstController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myFirstController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people | filter: {name: test}">
{{ x.name }}
</li>
</ul>
</div>

Resources