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"}];
}]);
Related
Does angular-schema-form have a method to show preselected values?
When the titleMap on the select will set an integer, preselected values will show. But if it will set an object, I found no way of showing the correct name.
Is there anything to tie the object to, like with ng-options where you can set an attribute to compare them with the "track by" clause?
ng-options="option as option.name for option in array track by option.id"
In my example code, cats1 will set an object, cats2 will set an integer.
HTML:
<body>
<div ng-controller="MainCtrl">
<div class="login-container">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model">
</form>
</div>
</div>
</body>
Controller:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.form = [
{
key: 'cats1',
type: 'select',
titleMap: [
{value: {id: 0, name: "Leopard"}, name: "Leopard"},
{value: {id: 1, name: "Tiger"}, name: "Tiger"}
]
},
{
key: 'cats2',
type: 'select',
titleMap: [
{value: 0, name: "Leopard"},
{value: 1, name: "Tiger"}
]
}
];
$scope.schema = {
"type": "object",
"properties": {
"cats1": {
"title": "Cats",
"type": "object"
},
"cats2": {
"title": "Cats",
"type": "number"
}
}
};
$scope.model = {cats1: {id: 1, name: "Tiger"}, cats2: 1};
}]);
Here is a plunkr:
https://plnkr.co/edit/0hK5Hrc9GXklfRwa6fjE?p=preview
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/
Here I have a select, where I want to repeat the contacts on the supplier.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
Hello {{name}}
<div ng-repeat="supplier in suppliers">
{{supplier.name}}
<select ng-options="contact.id as contact.name for contact in supplier.contacts">
</select>
</div>
</div>
<script>
var app = angular.module('app',[]);
//app.directive('appDirective', function() {});
//app.factory('appService', function() {});
app.controller('AppCtrl', ['$scope', function($scope){
$scope.name = "dave";
$scope.suppliers = [
{id: 0, name: "dave", contacts : [
{id: 0, name: 'c1'},
{id: 1, name: 'c2'},
{id: 2, name: 'c3'},
{id: 3, name: 'c4'},
]},
{id: 1, name: "Steve", contacts : [
{id: 0, name: 'c1'},
{id: 1, name: 'c2'},
{id: 2, name: 'c3'},
{id: 3, name: 'c4'},
]}
]
}]);
</script>
Here I have the controller.
How come this doesn't seem to work?
http://jsfiddle.net/gnosticdave/091vpadb/1/
contacts is part of each supplier - so your array is actually supplier.contacts
select ng-options="contact.id as contact.name for contact in supplier.contacts"
^^^^^^^^^^^^^^^^^^^^
Also, ngOptions needs an ngModel
Demo: http://jsfiddle.net/091vpadb/3/
Change:
<select ng-options="contact.id as contact.name for contact in contacts">
to:
<select ng-options="contact.id as contact.name for contact in supplier.contacts">
I hope someone can help me.
For my current project in angular 1.3 I'm using this list:
$scope.myList = [{
id: "obj1",
content: [{
id: 1,
name: 'attr 1'
}, {
id: 2,
name: 'attr 2'
}, {
id: 3,
name: 'attr 3'
}]
}, {
id: "obj2",
content: [{
id: 4,
name: 'attr 4'
}, {
id: 5,
name: 'attr 5'
}, {
id: 6,
name: 'attr 6'
}]
}, {
id: "obj3",
content: [{
id: 7,
name: 'attr 7'
}, {
id: 8,
name: 'attr 8'
}, {
id: 9,
name: 'attr 9'
}]
}];
I would like to get the object which has the id X in the content array.
I used this ng-repeat:
<ul>
<li ng-repeat="item in myList | filter: {content: [{id:1}]}">
{{item}}
</li>
</ul>
When I use id:1, id:4 or id:7 it works, but not for the other ids...
Has anyone any ideas?
Edit
I FINALLY found out what caused the problem, I was using angular 1.3.0. After upgrading to 1.3.11 it worked!!
You can filter based on nested properties like so:
<li ng-repeat="item in myList | filter: {content: {id: '1'}}">
{{item}}
</li>
It's important to note that the "object" (that has the id X) you'll get will be at the item level.
I have a simple angular-kendo ComboBox on a page without an initially selected value. It should show the placeholder text in that case, but instead it's showing ? undefined:undefined ?
HTML
<select kendo-combo-box ng-model="Project" k-options='projectOptions'></select>
JS
app.controller('MyCtrl', function($scope) {
$scope.projectData = [
{name: 'Bob', value: 1},
{name: 'Tom', value: 2}
];
$scope.projectOptions = {
placeholder: "'Select...'",
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: $scope.projectData
}
}
});
Here's a plunker that shows the problem. Can anyone spot the cause?
This used to work in an older version of angular-kendo, but it's not working in the current version.
This is somewhat related to this issue: https://github.com/angular/angular.js/issues/1019
The solution is simple: use an <input> instead of a <select> element:
<input kendo-combo-box ng-model="Project" k-options='projectOptions'/>
app.controller('MyCtrl', function($scope) {
$scope.projectData = [
{name: 'Bob', value: 1},
{name: 'Tom', value: 2}
];
$scope.projectOptions = {
placeholder: "'Select...'",
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: $scope.projectData
}
}
});
(demo)
If you are using <Select> instead of <input> you can use simple placeholder="'Project'"
For example:
<select kendo-combo-box="projectComboBox"
k-data-source="projectDataSourceBox"
k-data-text-field="'projectName'"
k-data-value-field="'projectId'"
k-ng-model="Dialog.ProjectId"
k-value-primitive="true"
k-suggest="true"
required="required"
k-auto-bind="false"
k-filter="'contains'"
k-change="projectChangeBox"
style="width: 100%"
placeholder="'Project'">
</select>