Does anyone know why AngularJS not selecting options on <select multiple> if ng-model is an array of integer?
$scope.selected = [1, 3]
$scope.options = [
{id: 1, title: 'option 1'},
{id: 2, title: 'option 2'},
{id: 3, title: 'option 3'}
]
Everything works just fine if $scope.selected = ['1', '3'] is array of string. I need to get it working without using ng-options.
Here is JSFiddle:
http://jsfiddle.net/maxflex/3jfk8/19/
Related
I have the following expression:
public mySentences:Array<string> = [
{id: 1, text: 'Sentence 1'},
{id: 2, text: 'Sentence 2'},
{id: 3, text: 'Sentence 3'},
{id: 4, text: 'Sentenc4 '},
];
which is not working because my array is not of type string rather contains a list of objects. How I can delcare my array to contain a list of objects?
*without a new component which declaring the a class for sentence which seem a waste
I assume you're using typescript.
To be extra cautious you can define your type as an array of objects that need to match certain interface:
type MyArrayType = Array<{id: number, text: string}>;
const arr: MyArrayType = [
{id: 1, text: 'Sentence 1'},
{id: 2, text: 'Sentence 2'},
{id: 3, text: 'Sentence 3'},
{id: 4, text: 'Sentenc4 '},
];
Or short syntax without defining a custom type:
const arr: Array<{id: number, text: string}> = [...];
public mySentences:Array<Object> = [
{id: 1, text: 'Sentence 1'},
{id: 2, text: 'Sentence 2'},
{id: 3, text: 'Sentence 3'},
{id: 4, text: 'Sentenc4 '},
];
Or rather,
export interface type{
id:number;
text:string;
}
public mySentences:type[] = [
{id: 1, text: 'Sentence 1'},
{id: 2, text: 'Sentence 2'},
{id: 3, text: 'Sentence 3'},
{id: 4, text: 'Sentenc4 '},
];
Another approach that is especially useful if you want to store data coming from an external API or a DB would be this:
Create a class that represent your data model
export class Data{
private id:number;
private text: string;
constructor(id,text) {
this.id = id;
this.text = text;
}
In your component class you create an empty array of type Data and populate this array whenever you get a response from API or whatever data source you are using
export class AppComponent {
private search_key: string;
private dataList: Data[] = [];
getWikiData() {
this.httpService.getDataFromAPI()
.subscribe(data => {
this.parseData(data);
});
}
parseData(jsonData: string) {
//considering you get your data in json arrays
for (let i = 0; i < jsonData[1].length; i++) {
const data = new WikiData(jsonData[1][i], jsonData[2][i]);
this.wikiData.push(data);
}
}
}
First, generate an Interface
Assuming you are using TypeScript & Angular CLI, you can generate one by using the following command
ng g interface car
After that set the data types of its properties
// car.interface.ts
export interface car {
id: number;
eco: boolean;
wheels: number;
name: string;
}
You can now import your interface in the class that you want.
import {car} from "app/interfaces/car.interface";
And update the collection/array of car objects by pushing items in the array.
this.car.push({
id: 12345,
eco: true,
wheels: 4,
name: 'Tesla Model S',
});
More on interfaces:
An interface is a TypeScript artifact, it is not part of ECMAScript. An interface is a way to define a contract on a function with respect to the arguments and their type. Along with functions, an interface can also be used with a Class as well to define custom types.
An interface is an abstract type, it does not contain any code as a class does. It only defines the 'signature' or shape of an API. During transpilation, an interface will not generate any code, it is only used by Typescript for type checking during development. - https://angular-2-training-book.rangle.io/handout/features/interfaces.html
public mySentences:Array<any> = [
{id: 1, text: 'Sentence 1'},
{id: 2, text: 'Sentence 2'},
{id: 3, text: 'Sentence 3'},
{id: 4, text: 'Sentenc4 '},
];
OR
public mySentences:Array<object> = [
{id: 1, text: 'Sentence 1'},
{id: 2, text: 'Sentence 2'},
{id: 3, text: 'Sentence 3'},
{id: 4, text: 'Sentenc4 '},
];
Datatype: array_name:datatype[]=[];
Example string: users:string[]=[];
For array of objects:
Objecttype: object_name:objecttype[]=[{}];
Example user: Users:user[]=[{}];
And if in some cases it's coming undefined in binding, make sure to initialize it on Oninit().
type NumberArray = Array<{id: number, text: string}>;
const arr: NumberArray = [
{id: 0, text: 'Number 0'},
{id: 1, text: 'Number 1'},
{id: 2, text: 'Number 2'},
{id: 3, text: 'Number 3 '},
{id: 4, text: 'Number 4 '},
{id: 5, text: 'Number 5 '},
];
$scope.accounts = [
{id: 1, name: 'Tommy',status:'premium'},
{id: 2, name: 'Alexander',status:'free'},
{id: 3, name: 'Lorem',status:'banned'},
{id: 4, name: 'Ipsum',status:'premium'}
{id: 5, name: 'Dot sit',status:'Y'}
];
How can I adjust dynamically to the situation in this json output?
for example, multiple data in groupby
<select>
<option>premium</option>
<option>free</option>
<option>banned</option>
<option>y</option>
</select>
(My English is bad )
<select ng-options="item as item.status for item in (accounts | unique: 'status')"></select>
You need to include the filter from https://github.com/angular-ui/angular-ui-OLDREPO/tree/master/modules/filters/unique
I have a dropdown-multiselect. This directive uses Bootstrap's Dropdown with the power of AngularJS directives and binding. I new to angularjs.
<li id="bedsLists">
<div ng-dropdown-multiselect=""
options="beds"
selected-model="selectedBeds"
checkboxes="true"
events="{onItemSelect: onItemSelect, onItemDeselect: onItemDeselect}"
extra-settings="{showCheckAll: false, showUncheckAll: false, dynamicTitle: false, externalIdProp: 'Value', displayProp: 'Name', idProp: 'Value'}"
translation-texts="{buttonDefaultText: 'Beds'}">
</div>
</li>
From stateParams, required value is fetched, for example "1". How to make the first checkbox selected?
Try this
In your Controller
var myApp = angular.module('exampleApp',['angularjs-dropdown-multiselect']);
myApp.controller('appController', ['$scope', function($scope) {
$scope.selectedBeds = [{id: 1, label: "David"}]; // add the 1st data of your
$scope.beds = [
{id: 1, label: "David"},
{id: 2, label: "Jhon"},
{id: 3, label: "Lisa"},
{id: 4, label: "Nicole"},
{id: 5, label: "Danny"}];
}]);
I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/
I have an angular model receives data from an API that looks like:
$scope.questions = [
{name: 'Question 1', options:['Option 1', 'Option 2', 'Option 3'],id: 1},
{name: 'Question 2', options:['Option A', 'Option B', 'Option C'],id: 2},
{name: 'Question 3', options:['Option a', 'Option b', 'Option c'],id: 3}
]
And, I would like to iterate over all the questions and have a series of one select box per question with the select's options coming from the question object
<div ng-repeat="question in questions">
<label>{{question.name}}</label><select ng-options="?"></select>
</div>
I am having trouble figuring out what the ? should be. I thought ng-options="o in question.options" might work, but no such luck. Can this be done? If so, how?
As per the documentation, it should be
o for o in question.options
Note that you'll need to specify an ng-model attribute for this to work:
<select ng-model="question.selectedOption" ng-options="o for o in question.options"></select>
Here's a plunk showing that it works.