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>
Related
How to use ng-options.
$scope.fieldTable = [
{
filed:"text",
title:"Global"
},
{
field: "relatedentity",
title: "Entity"
},
{
field:"title",
title:"Title"
},
{
field: "content",
title: "Content"
}
]
I want to build a which use the title as displayed and when select something, popout a alert window which display the according field. The initial selection is
{
filed:"text",
title:"Global"
}
Can anyone help?
var app = angular.module('stack', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldTable = [{
field: "text",
title: "Global"
}, {
field: "relatedentity",
title: "Entity"
}, {
field: "title",
title: "Title"
}, {
field: "content",
title: "Content"
}];
$scope.selected = $scope.fieldTable[0];
$scope.hasChanged = function() {
alert($scope.selected.field);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="stack" ng-controller="MainCtrl">
<select ng-options="item.title for item in fieldTable" ng-model="selected" ng-change="hasChanged()">
</select>
</body>
You can use ng-change to do that
<select ng-options="item.title as item.title for item in fieldTable track by item.title" ng-model="selected" ng-change="onChanged()">
then in your onChange() method in the controller you can do whatever you want it to do :) In your case , show an alert with the value
edit:
https://plnkr.co/edit/4csDtFVH5mKd7Xr39WtG?p=preview
I'm trying to evaluate filters programmatically within an Angular expression in a template.
HTML:
<div ng-app="myApp">
<div ng-controller = "MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 43},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", },
{ field: "age", cellTemplate: '<div><div>{{row.getProperty(col.field) | col.colDef.filter}}</div></div>', cellFilter: 'test' }],
};
});
app.filter('test', function () {
return function (input) {
return input + '!';
};
});
CSS:
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 100%;
height: 500px;
}
As you can see, in the cellTemplate for the 'age' column, I'm trying to pass through the cell data through a filter that is in a string in my column definitions (col.colDef.filter).
Is this possible?
I want to do this because I want to use just one template but define a variety of filters on each of the columns.
http://jsfiddle.net/GWha8/2/
How about simply adding test as the filter instead of getting the col's:
{{row.getProperty(col.field) | test}}
Updated jsfiddle.
The gridOption id you should be using is cellFilter (not filter). If you are not doing any other formatting that would require a cellTemplate all you need to do it set $scope.gridOptions.columnDefs[1].cellFilter = 'test' like this:
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
field: "name"
},
{
field: "age",
cellFilter: 'test'
}
]
};
However, if you are do need to do other changes that will require a cellTemplate then you can just reference your filter by name right in the template (no need to define $scope.gridOptions.columnDefs[1].cellFilter) like this:
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
field: "name"
},
{
field: "age",
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">{{COL_FIELD | test}}</div>''
}
]
};
1) you can fix this in ng grid sources inside ngColumn, and use column cellFilter
if (colDef.cellTemplate && !TEMPLATE_REGEXP.test(colDef.cellTemplate)) {
self.cellTemplate = $.ajax({
type: "GET",
url: colDef.cellTemplate,
async: false
}).responseText;
}
self.cellTemplate = self.cellTemplate.replace(CUSTOM_FILTERS, self.cellFilter ? "|" + self.cellFilter : "");
2) you can create custom function which accept filter and return string
function getTemplateFilter(test){
return '<div><div>{{row.getProperty(col.field) | '+ test +'}}</div></div>'
}
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
<select data-ng-model="engineer.currentActivity" data-ng-options="a.name for a in activities">
</select>
Using the above I am able to create a select box with 3 values, a blank one and then dropdown menu and horizontal bar.
I would like to set Horizontal Bar as my default and cannot see how to do this.
Help would be great
In the controller, just add a line to setup the initial selection:
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.engineer = {}; // if needed
$scope.engineer.currentActivity = $scope.activities[1];
In your angular controller:
$scope.activities = [
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.activity = $scope.activities[1]; //Bind 2nd activity to the model.
In the HTML:
<select ng-model="activity"
ng-options="activity as activity.name for activity in activities">
<option value=""></option>
</select>
See the Fiddle
Use ng-init directive
ng-init="engineer.currentActivity = options[1]"
I'm working on a simple angular app with two controllers:
function Invite($scope) {
$scope.fieldsets =
[
{
fields:
[
{
label: 'First Name',
name: 'firstname',
key: 'entry.810220554',
type: 'text',
required: true
},
{
label: 'Last Name',
name: 'lastname',
key: 'entry.1653030831',
required: true,
},
{
label: 'Email',
name: 'email',
key: 'entry.1727688842',
required: true,
type: 'email',
},
{
key: 'entry.1602323871',
type: 'radio',
labels:
[
{
name: 'media',
label: 'Media'
},
{
name: 'frilans',
label: 'Frilans'
}
],
}
],
}
];
}
function Questionnaire($scope, $http){
$scope.post = function(){
console.log();
$http.post('/signup.php', $scope.quiz).
success(function(data, status, headers, config){
console.log(data);
});
};
}
The Questionare-scope is a child of the invite scope. Here is simplified version of the layout
<div ng-controller="Invite">
<form ng-controller="Questionnaire" method="POST" ng-submit="post()">
<input ng-model="{{field.key}}" />
</form>
</div>
The first one generates a form where I want the key-values to be used as ng-model.
In the second scope, so that I can post them to the server with that key.
I first tried to use
<input ng-model="{{field.key}}" />
in my html template, this was my intuitive guess, but it rendered an error.
<input ng-model="field.key" />
this also giving error.
Here is a plnkr:
http://plnkr.co/edit/rnQXlCCFQypVLs20OuTt?p=preview
There is no object fields in the questionnaire scope. You may be able to reference the object to in the outer scope by using ng-repeat=field in $parent.fields, I'm not sure if nested scopes are related via prototypical inheritance.
Another approach would be to create a service that tracks fields and inject it into all the controllers that need access to the data.
I have a view in an angularjs application in which I want to allow the user to select between various differently configured grids. Ideally I would like to bind the value passed to the ng-grid directive to a model variable, as illustrated below. However, although this example renders markup that works when a simple string value is passed to ng-grid (ie. <div class="gridStyle" ng-grid="gridOptions1"></div>, dynamic configuration fails.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.option;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions1 = { data: 'myData',
columnDefs: [{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true };
$scope.gridOptions2 = { data: 'myData',
columnDefs: [{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false };
});
<body ng-controller="MyCtrl">
<label>Show me:</label>
<input type="radio" name="option" ng-model="option" value="gridOptions1">Grid A</input>
<input type="radio" name="option" ng-model="option" value="gridOptions2">Grid B</input>
<div class="gridStyle" ng-grid="{{option}}"></div>
</body>
Can anyone tell me please if there is a way of getting ng-grid to accept a different configuration dynamically, or if there is a workaround to this limitation? Please note that I need to reconfigure multiple properties of the grid, not just the columnDefs and data properties for which I believe there are workarounds.
Plunker: http://plnkr.co/edit/mdXrq6?p=preview
It looks like you can do it if you assign columnDefs to a string of a property on the $scope and then change the array: http://plnkr.co/edit/wuob1M?p=preview;
It is described in this issue raised on ng-grid.
JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.columnDefs1 = [{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}];
$scope.columnDefs2 = [{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}];
$scope.gridOptions = { data: 'myData',
columnDefs: 'columnDefs1',
multiSelect: true };
$scope.switchColumnDefs = function() {
$scope.columnDefs1 = $scope.columnDefs2;
}
});
HTML:
<body ng-controller="MyCtrl">
<label>Show me:</label>
<a ng-click="switchColumnDefs()">Switch Options</a>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
Just thought I'd share that if anyone is interested in changing from Single Select to MultiSelect it can be done dynamically like so:
$gridScope.selectionProvider.multi = true / false;
Found a nice solution to this on the angular forum. Essentially, if an array of config objects is maintained, individual elements can be passed to the ng-grid directive as in the markup above. Plunker illustrating solution here: http://plnkr.co/edit/TDGKRo?p=preview
var gridOptions1 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true,
selectedItems: $scope.selected
};
var gridOptions2 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false,
selectedItems: $scope.selected
};
$scope.filterTabs = [{grid: gridOptions1}, {grid: gridOptions2}];
<ol>
<li ng-repeat="tab in filterTabs">
<div class="gridStyle" ng-grid="tab.grid"></div>
</li>
</ol>
Another way to do this is to just stick in something like:
<div ng-grid="gridOptions" ng-if="refresh"></div>
Then just flip refresh to off, update the grid config, then back to on in two different refresh cycles.
It is possible like the plnker that I edited for you: Here
Please notice when I played with it, not all options where live refreshing... But some where as you can see in the example.
Basically the solution is to have $scope variables assigned to the params of gridOptions.