Hi I am new to angular and im using ng-grid to display a set of table data. The issue im facing recently is that I need an external filter which is a select dropdown so based on the selected value i need to filter my data grid I searched a lot but couldn't get any solutions. Any help here will be appreciated.
I tried even this solution How to filter my data? (ng-grid) of #cObra but not successful.
Here is my code
<select id="source" style="margin:5px" ng-model="sourceNameSelected"
ng-options="source.sourceName for source in lstsource.sources">
<option value="" selected>
-- Select Source --
</option>
</select>
<div id="leftJobManagerInfo" class="span8" >
<!-- <input type="text" ng-model="filterOptions.filterText" > -->
<div class="gridStyle" ng-grid="gridOptions" ng-controller="JobManagerController as jobManager" ></div>
</div>
in controller
$scope.gridOptions = {
data: 'jobs',
enablePaging:true,
columnDefs:[{field:"jobId",displayName:"Id",visible: false},
{field:"fileName",displayName:"File"},
{field:"sourceId",visible: false},
{field:"sourceName",displayName:"Source"},
{field:"groupId",visible:false},
{field:"groupName",displayName:"Group"},
{field:"status",displayName:"Status",cellTemplate:'views/templates/statusDisplayImageTemplate.html'},
{field:"time",displayName:"Time",cellTemplate: templateForWrappingData},
{field:"trigger",displayName:"Trigger"},
{field:"triggerBy",displayName:"Trigger By"},
{field:"arrivalTime",displayName:"Arrival Time",cellTemplate:templateForWrappingData},
{field:"server",displayName:"Server"}],
filterOptions: {filterText: '',useExternalFilter: true},
};
I also tried keeping an hidden input element and bind it to filterText like this
<input type="hidden" ng-model="filterOptions.filterText" ng-init="filterOptions.filterText=sourceNameSelected.sourceName">
but didn't work. Thanks a lot in advance.
try this:
first of all move your select box under the scope of the same controller where you have your grid
on chnage of select box reset the filterOptions.filterText (you can also assign it directly to the ng-model of select box as well, if you want)
HTML
<div id="leftJobManagerInfo" class="span8" ng-controller="JobManagerController">
<select id="source" style="margin:5px" ng-model="sourceNameSelected" ng-options="source.sourceName for source in lstsource.sources" ng-change="filterOptions.filterText = sourceNameSelected.sourceName">
<option value="" selected>
-- Select Source --
</option>
</select>
<!-- <input type="text" ng-model="filterOptions.filterText" > -->
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
JobManagerController Controller
$scope.lstsource = //put your select box options list here
$scope.sourceNameSelected='';
$scope.filterOptions = {
filterText: ''
};
$scope.gridOptions = {
data: 'jobs',
enablePaging:true,
columnDefs:[{field:"jobId",displayName:"Id",visible: false},
{field:"fileName",displayName:"File"},
{field:"sourceId",visible: false},
{field:"sourceName",displayName:"Source"},
{field:"groupId",visible:false},
{field:"groupName",displayName:"Group"},
{field:"status",displayName:"Status",cellTemplate:'views/templates/statusDisplayImageTemplate.html'},
{field:"time",displayName:"Time",cellTemplate: templateForWrappingData},
{field:"trigger",displayName:"Trigger"},
{field:"triggerBy",displayName:"Trigger By"},
{field:"arrivalTime",displayName:"Arrival Time",cellTemplate:templateForWrappingData},
{field:"server",displayName:"Server"}],
filterOptions: {
filterOptions : $scope.filterOptions,
useExternalFilter: true
},
};
Hope it helps you :)
Related
When I'm using ng-model inside of ng-repeat it updates all ng-models inside that repeat loop. If I remove datatype and directly set to myCtrl.data[$index] it works fine.
Any suggestions?
template:
<div ng-repeat="i in myCtrl.data track by $index">
<div>
<div>
<select
ng-model="myCtrl.data[$index].datatype"
ng-options="item.value as item.label for item in myCtrl.detailTypes track by item.label"
>
<option value="" disabled selected>
select an option
</option>
</select>
</div>
</div>
</div>
controller:
self.detailTypes = [
{label: 'KEY_1', value: 'VAL_1'},
{label: 'KEY_2', value: 'VAL_2'},
];
self.data = new Array(2).fill({dataType: null});
When I select KEY_1 for first select, it changes object to [{dataType: 'VAL_1'}, {dataType: 'VAL_1'}]
Ok so this is happening because you are populating your self.data with Array.fill which when used with objects, passes by reference not value.
If you change declaration of your self.data to this
self.data = [];
self.data.push({dataType:null},{dataType:null});
it will work.
The below thing is taking too much time than expected. Been through top stack solutions and somehow got the below thing--
WHAT IS THE SCENERIO
I have an ng-repeat div with dropdown.
The drop down contains values and based on selection of those values a div will be shown. What I managed is div is shown. But when I choose another item the previous item div gets hidden.
Below are the screen shot and my code
As it can be seen that when I select the first item it shows the textbox div. But when I select the next item the first gets hidden. There are essentially two values -- ALL, Fixed. When All selected nothing will be shown and when Fixed is selected the div for that particular item will be shown.
HTML code
<div class="tst text-success" ng-repeat="(parentIndex, catList) in categoryArray">
<div class="col-md-3">
{{catList.categoryName}}
</div>
<div class="col-md-4">
<select class="form-control m-b" ng-model="catObj.cats" ng-change="changeOption(catObj,parentIndex)">
<option value="All">All</option>
<option value="fixed">Fixed No. Of Records</option>
<option value="perfixed">% od Fixed</option>
</select>
</div>
<div class="col-md-3 noPad" ng-if="isShowing==parentIndex">
<input type="text" class="form-control form-control-small" placeholder="Set Number" />
</div>
</div>
CONTROLLER
$scope.changeOption = function(obVal,index) {
console.log(obVal);
console.log(index);
if(obVal.cats == "All") {
//$scope.tbx = 0;
}
else {
$scope.isShowing = index;
}
}
Help would be appreciated
Thanks
You're using a single boolean $scope variable, isShowing, to control the visibility of several divs. That can't possibly work.
You should
have an array of objects, each having a selectedOption field.
use ng-model in your select box to set the selectedOption of the object you're editing.
use the value of the object's selectedOption to know if the additional input should be visible for that object.
Example:
<div ng-repeat="obj in objects">
{{ obj.name }}
<select name="op" ng-model="obj.selectedOption" ng-options="option.value as option.value for option in options"></select>
<input ng-if="obj.selectedOption !== 'All'" />
</div>
app.controller('MainCtrl', function($scope) {
$scope.options = [
{value: 'All'},
{value: 'Fixed'}
];
$scope.objects = [
{name: 'Twitter', selectedOption: 'All'},
{name: 'News', selectedOption: 'Fixed'}
]
});
I've followed the following link to solve the issue but it didn't work:
How to get option text value using AngularJS?
I have a dropdown that contains a set of servers. when i select a value from the dropdown, I want the selected value to display in a separate div. Here is what I have done:
Select control:
<select name="source" class="form-control input-sm"
ng-model="filterOptions.hostId"
ng-options="s.id as s.hostName for s in physicalServerList"
ng-style="{'width':'100%'}">
</select>
Displaying selected text:
<span class="pull-left">Source: {{ filterOptions.hostId.hostName }}</span>
However, this does not display the selected text. What am I doing wrong?
It does not display selected text because your model will have the id of the selected item because of the usage of s.id as s.hostName (select as label syntax) in the ng-options. Just remove the select as part from the syntax, have the ng-model hold the selected object's reference itself instead of just the id.
So your ng-option:-
ng-model="filterOptions.host"
ng-options="s.hostName for s in physicalServerList track by s.id"
and your model will be the selected object instead of just the id of the selected item
<span class="pull-left">Source: {{ filterOptions.host.hostName }}</span>
Plnkr
Try this function:
var hostApp = angular.module('hostApp', []);
hostApp.controller('hostController', function($scope) {
$scope.options = [
{ value: '1', label:'hosting1' },
{ value: '2', label:'hosting2' },
{ value: '3', label:'hosting3' }
];
$scope.hostSelected = $scope.options[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="hostApp">
<div ng-controller="hostController">
<select ng-model="hostSelected"
ng-options="opt as opt.label for opt in options">
</select>
<div>value: {{ hostSelected.value }} <br />label: {{ hostSelected.label }}</div>
</div>
</div>
I have a following question for AngularJS. I have a
select with options created with ngOptions. I want to
set selected option back to default option. I tried to
delete model variable e.g:
if(angular.isDefined($scope.first)){
delete $scope.first;
}
But this not working. Here is my html.
<div ng-app="app">
<div ng-controller="testCtrl">
<select data-ng-model="first" data-ng-options="item.name for item in selectContent" required="required">
<option value="" style="display: none;">-- select --</option>
</select>
{{first.value}}
<hr/>
<input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
</div>
</div>
And here is my JavaScript code:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.selectContent = [
{
name: "first",
value: "1"
},
{
name: "second",
value: "2"
}
];
$scope.resetDropDown = function() {
if(angular.isDefined($scope.first)){
delete $scope.first;
}
}
});
Here is working jsfiddle:
http://jsfiddle.net/zono/rzJ2w/
How I can solve this problem?
Best regards.
Your reset-button is placed outside of the div containing your controller. This means that your reset-function does not exist in the context where you try to use it.
Change to:
<div ng-app="app">
<div ng-controller="testCtrl">
<select data-ng-model="first" data-ng-options="item.name for item in selectContent" required="required">
<option value="" style="display: none;">-- select --</option>
</select>
{{first.value}}
<hr/>
<input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
</div>
</div>
It's always a good idea to use a debugger to make sure the code you're trying to fix is actually being executed.
$scope.resetDropDown = function() {
$scope.first = "";
}
Solution above works for Windows and Android, but did not work for iOS browsers. Probably events are happening in different order there.
So for my code I:
created ID for select element, so I could easily find it by
iQuery;
created delayed invocation of to statements to ensure the
reset is happenning at the very end;
and just in case was
resetting in two ways (but just first way was actually enough in iOS
too);
function resetDropDown () {
$timeout(function(){
$scope.first = '';
// jQuery way
$('select#idOfSelectElement option:first' ).prop( 'selected', true );
}, 200);
}
I am having a problem binding Angular ng-check to ng-model, that is ng-model does do not recognize the selected state of my check boxes.
Here is a description(Its a much larger code base but I have tailored to minimize code).
On page load in JavaScript I initialize my products and set the default values:
$scope.products = {}
$scope.SetProductsData = function() {
var allProducts;
allProducts = [
{
id: 1,
name: "Book",
selected: true
}, {
id: 2,
name: "Toy",
selected: true
}, {
id: 3,
name: "Phone",
selected: true
}]
I have a master control in my view that list a check box for each 3 products(Book,Toy and phone):These are checked by default
<div style="float:left" ng-init="allProducts.products = {}" >
<div ng-repeat="p in Data.products">
<div style="font-size: smaller">
<label><input id="divPlatorm" ng-model="products[p.name]" ng-init="products[p.name] = true" type="checkbox"/>
{{p.name}}</label>
</div>
</div>
</div>
Then a table that have the same products repeated in rows:
<div ng-repeat="line in lineProducts" ng-init="line.products = {}">
<div id="sc-p-enc" ng-repeat="p in Data.products">
<div id="sc-p-plat" style="font-size: smaller">
<label id="pl-label"><input ng-checked="products[p.name]" ng-model="line.products[p.name]" ng-init="line.products[p.name] = true" type="checkbox"/>
{{p.name}}</label>
</div>
</div>
</div>
When I check/unchecked the master products the corresponding check boxes changes in the rows. So if I have 100 rows with (Book,Toy and phone) the unchecked Toy I can see where all toys are unchecked in the rows.
When I send the data to my controller I can still see all Toys = true even though they were unchecked.
If I physically go to the row then unchecked each toy and send the data to my controller Toys = False.
How can I get the check boxes selected state to change when controlled from the master check-boxes?
I have followed the post found here but I dont think this applies to my scenario:
AngularJS: ng-model not binding to ng-checked for checkboxes
It seems the ng-checked in the table is binding to products[p.name], which the ng-model in your master control in the view also binding to. But the ng-model in your table is binding to another property, line.products[p.name].
I think you probably don't need ng-checked in the table since each item has its own ng-model. So you might change your table view to
<label id="pl-label"><input ng-model="line.products[p.name]" type="checkbox"/>{{p.name}}</label>
and in the controller, change the corresponding value of line.products[p.name] every time the value of products[p.name] is changed.
I just solved this problem myself by using "ng-init" and "ng-checked" ---
ng-checked - 'checked' the checkbox as form was loaded
ng-init- bound my checkbox html value attribute to the model
There is a comment above stating that its not good to use ng-init in this manner, but not other solution was provided.
Here is an example using ng-select instead of ng-checked:
<select ng-model="formData.country">
<option value="US" ng-init="formData.country='US'" ng-selected="true">United States</option>
</select>
This binds "US" to model formData.country and selects the value on page load.
If I understand the functionality you are trying to cover the following fiddle might help you. Here is the code:
<div style="float:left" ng-app ng-init="products = [
{
id: 1,
name: 'Book',
line: 'Books',
selected: true
}, {
id: 2,
name: 'Another Book',
line: 'Books',
selected: true
}, {
id: 3,
name: 'Toy',
line: 'Toys',
selected: false
}, {
id: 4,
name: 'Another Toy',
line: 'Toys',
selected: false
}, {
id: 5,
name: 'Phone',
selected: true
}];lineProducts = ['Toys', 'Books']" >
<div style="float:left">
<div ng-repeat="p in products">
<div style="font-size: smaller">
<label>
<input ng-model="p.selected" type="checkbox"/>
{{p.name}}
</label>
</div>
</div>
</div>
<div ng-repeat="line in lineProducts">
{{line}}
<div ng-repeat="p in products | filter:line">
<div style="font-size: smaller">
<label>
<input ng-model="p.selected" type="checkbox"/>
{{p.name}}
</label>
</div>
</div>
</div>
</div>
Also why do you have ids in your html? With angular there is no need in ids, and considering that they are inside ng-repeats they will be ambiguous and therefore useless anyway.
I also agree with Nikos about usage of the ng-init. I used it in my jsfiddle because I am lazy, I would not use it in the production code
You should use ng-model there that would provide you two way binding. Checking and unchecking the value would update the value of product.selected
<input type="checkbox" ng-model="p.selected"/>