I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/
It looks like it's working, but we have not seen any selected sign. When I select from the dropdown box It's look like-
Here is my code,
Angular Directive,
scope.example9model = []; scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; scope.example9settings = {enableSearch: true};
Call from HTML,
<div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
what's the problem there I can't figure out this.
Related
I have multiple checkboxes, when I click on a "Select All/None" checkbox, it works, all the checkboxes are checked, but I want to be able to check each checkbox one by one. My problem is that they all use the same state. So if I click on a checkbox to only check this one, it is checking all the other ones.
So my question is : Is it possible to concatenate an id to a state ?
There are my states :
isAllTablesChecked: false,
isAllReportsChecked: false,
isTableChecked: false,
isReportChecked: false,
tables: [
{id: 1, name: 'Accounts'},
{id: 2, name: 'Asset Types'},
{id: 3, name: 'Assets'},
{id: 4, name: 'Bank Transactions'}
],
report: [
{id: 5, name: 'Aged Payables by Contact'},
{id: 6, name: 'Aged Receivables by Contact'},
{id: 7, name: 'Balance Sheet'},
{id: 8, name: 'Bank Statement'}
]
In a map, below :
const tables = this.state.tables.map(table =>
<div>
<Input
type="checkbox"
name={table.name}
id={this.state.isTableChecked}
checked={this.state.isTableChecked}
onClick={this.checkTables}
/>
<b> {table.name} </b>
</div>
)
const reports = this.state.reports.map(report =>
<div>
<Input
type="checkbox"
name={report.name}
id={this.state.isReportChecked}
checked={this.state.isReportChecked}
onClick={this.checkReports}
/>
<b> {report.name} </b>
</div>
)
For the id line in the <Input> tag, is it possible to do something like :
id={this.state.isTableChecked+tables.id}
Thanks for your help.
I found a solution to my issue.
As I said in my response to Jeremy Harris, I used the checked property inside the JSON data of my state array badly.
Here is the link to the solution, it worked for me :
https://medium.com/#tariqul.islam.rony/multiple-checkbox-handling-by-react-js-84b1d49a46c6
Hope that will help you, I will put this topic as resolved.
I have list of objects for items and everything works fine, but now I want to add default value selected, but I have issues with it.
Here's the HTML code for the drop-down:
<select kendo-drop-down-list
k-options="selectItems"
k-ng-model="selectedItem">
</select>
And in AngularJS (using TypeScript) I'm making the drop-down:
this.itemsToSelect = [{id: 1, name: "One"}, {id: 2, name: "Two"}];
this.selectItems = {
optionLabel: "Select items...",
dataTextField: "name",
dataValueField: "id",
dataSource: new kendo.data.DataSource({
transport: {
read: (options) => {
options.success(this.itemsToSelect);
}
}
}),
value: this.itemsToSelect[0]
};
I don't have default value selected with this.
I tried the code from their documentation and it works with items as strings, but with items as objects works when I say something like:
value: this.itemsToSelect[0].id
So, their code looks like this:
<script>
let items = [{id: 1, name: "one"}, {id: 2, name: "two"}];
$("#dropdownlist").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: items,
value: items[1].id
});
</script>
I tried this in my code and it doesn't work.
Code doesn't have any errors. Any suggestions?
EDIT
What I can do is this:
this.selectedItem = this.itemsToSelect[0];
I've set k-ng-model in the HTML and I can just set the selected value like this.
But, is there a way to do it through value in this.selectItems object?
Make a local object representing your default value, like
{
id: 1,
name: "bob"
}
then on the control set autoBind to false.
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/autobind
This is my first post on here so bear with me, I'm fairly new to AngularJS as well. I'm trying to build a form with ng-repeat and having trouble wrapping my head around the angular stuff.
JS in controller:
$scope.myCurrentAssets = {
cash_equiv: {name: 'Cash & Equivalents', value: 0, tbi: 41},
invest: {name: 'Short Term Investments', value: 0, tbi: 42},
notes_rec: {name: 'Notes Receivable', value: 0, tbi: 43},
account_rec: {name: 'Accounts Receivable', value: 0, tbi: 44},
inventory: {name: 'Inventory', value: 0, tbi: 45},
prepaid: {name: 'Prepaid Expenses', value: 0, tbi: 46},
other: {name: 'Other Current Assets', value: 0, tbi: 47}
};
HTML:
<div class="row" ng-repeat="(keyAssets, valueAssets) in myCurrentAssets">
<span>{{valueAssets.name}}</span>
<input data-name="myCurrentAssets.{{keyAssets}}"
data-ng-model=""
data-placeholder="{{valueAssets.value}}"
data-ng-change="compute()"
/>
</div>
The problems I'm having are:
trying to get the 'data-ng-model' set to something unique in each instance of the ng-repeat
how do I access the value of the input field from the compute() function?
trying to get the 'data-ng-model' set to something unique in each instance of the ng-repeat
You can use list[key][value] that will be different per item in ng-repeat
how do I access the value of the input field from the compute() function?
Generally you can use ng-model that automatically fetches input data.
<div class="row" ng-repeat="(keyAssets, valueAssets) in myCurrentAssets">
<span>{{valueAssets.name}}</span>
<input data-name="myCurrentAssets[keyAssets]['name']"
data-ng-model="myCurrentAssets[keyAssets]['value']"
data-placeholder="myCurrentAssets[keyAssets]['value']"
data-ng-change="compute(myCurrentAssets[keyAssets]['value'])"
/>
</div>
Demo Fiddle
I am trying to use this plugin in my project to have multiple range slider within ng-repeat. http://prajwalkman.github.io/angular-slider/
The plugin works fine when there is single slider , but when i try to put multiple slider in ng-repeat it doesn't work.
Not sure is there anything wrong with my codes or the plugin doesn't support that.
Is there anyway i can make it work?
Here is the demo plnkr.
http://plnkr.co/edit/9H7WF44X7zCWaw91jDyr?p=preview
<body ng-controller='PriceCtrl'>
{{position}}
<div>
<slider floor="10" ceiling="60" ng-model-low="position.minAge" ng-model-high="position.maxAge"></slider>
</div>
<div ng-repeat="item in items">
{{item}}
<slider floor="10" ceiling="60" ng-model-low="item.minPrice" ng-model-high="item.maxPrice"></slider>
</div>
</body>
app.controller('PriceCtrl', function ($scope){
$scope.items = [{name: "item 1", minPrice: 10,
maxPrice: 50},
{name: "item 2", minPrice: 5,
maxPrice: 40},
{name: "item 3", minPrice: 15,
maxPrice: 30}];
$scope.lower_price_bound = 0;
$scope.upper_price_bound = 50;
$scope.position = {
name: 'Potato Master',
minAge: 25,
maxAge: 40
};
});
You can use rg-slider
It's allows you to use multiple sliders in one page.
Let's say I have a 4 div tags in my view:
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
And let's say that when the user selects clicks on one of them I want the rest to, say, turn red. Normally in a dirty jQuery style I'd use something like:
var tiles = $('.tile');
tiles.click(function()
{
tiles.css('background', 'red');
});
However, how would I do this in the world of AngularJS? Would I stick this code in the controller and have it relative to the $scope? Or would I create a directive and bind that to each tile element?
Assuming that you wouldn't just have 4 random tiles in your interface not bound to some kind of model, you could do something like this:
http://jsfiddle.net/V4YC9/1/
HTML
<div ng-app ng-controller="x">
<div ng-repeat="tile in tiles" ng-click="selectTile(tile)" ng-class="tile.class">{{tile.name}}</div>
</div>
JavaScript
function x($scope) {
$scope.selectedTileIndex = null;
$scope.tiles = [
{id: 1, name: 'tile 1'},
{id: 2, name: 'tile 2'},
{id: 3, name: 'tile 3'},
{id: 4, name: 'tile 4'}
];
// provide default class to all tiles
angular.forEach($scope.tiles, function (tile) {
tile.class = 'tile';
});
$scope.selectTile = function (clickedTile) {
angular.forEach($scope.tiles, function (tile) {
tile.class = 'tileNotSelected';
});
clickedTile.class = 'tileSelected';
}
}
Edit: There are probably 10 different ways to do it. If you don't want to muddy up your model, you could store a separate array in $scope and calculate the class real time by saying ng-class="calculateTileClass(tile)", similar to what I did in my initial response: http://jsfiddle.net/V4YC9/1/