I am just starting with ionic framework, trying to redo an existing bootstrap / angular application to mobile as a hybrid app.
Is there an idiomatic way to do a dropdown menu in ionic? I have searched the ionic website/forums and also googled but no luck. Like bootstrap single button dropdown. I am OK with JavaScript but HTML/CSS is not my cup of tea.
Will appreciate your help.
--EDIT
Thanks TechMa9iac. I am trying to follow that line.
I am trying to make a 2-level dropdown using angular? I have modeled my data like in the ngSelect doc.
$scope.currSel = null;
$scope.metadata = [
{ proc: "Proc-1", board: "Alloc" },
{ proc: "Proc-1", board: "Manager" },
{ proc: "Proc-1", board: "Ops" },
{ proc: "Proc-2", board: "Alloc" },
{ proc: "Proc-2", board: "Manager" },
{ proc: "Proc-3", board: "Alloc" },
{ proc: "Proc-3", board: "Manager" }
];
HTML
<span>{{item.proc}}
<select ng-model="currSel"
ng-options="item.board group by item.proc
for item in metadata">
</select>
I show the proc value separately in html because the select text area shows only board value (the label in select).
when the ng-model in an ng-options is an object, it must be an object reference to one of the value array / dict elements. It cannot be an angular.copy.
Updated plunker
Related
In the team view filters of Twilio flex UI, I want to set the filter selection dynamically. I need to pass an array or object on dynamically to set the filters selection and the results need to be displayed accordingly based on the new filter selection. Any idea on how to achieve it? Thank you.
Use this
let defaultTwilioAgentList = [
{
query: 'data.activity_name == "Available" OR data.activity_name == "Idle"',
text: "Active Agents"
},
{
query: '',
text: "All Agents"
},
];
Flex.AgentsDataTable.defaultProps.filters = departmentList;
This works for me at Flex version 1.21.1
In my ASP.net MVC web project, I am using ANgularJS ui-grid for better data display option.
In the other razo view pages I have used partial view load
<partial name="TestPartialView" model="data.TestPartialData" />
Now in the ui-grid, in a column I also want to use the partial view.
```$scope.columns = [
{
name: 'TestColumn',
field: '..xxx',
width: '30%',
cellTemplate: 'Templates/TestPartialView.cshtml'
},] ```
But I really dont know how to do this. Also in my TestPartialView.cshtml, I need to inject a model class.
As a current alternative, I have defined the template again in the javascript file.But I want reuse the template.
Any idea?
Update:
So the above screenshot is my scenario. I will have a grid column statistics. And in the cell I will show bar chart based on some row specific model data.
Yes I have done this (as seen on the picture) with column definition.
Now the similar bar chart I have used a .cshtml file where a model class is passed and the view is loaded partially.
I want to reuse the partial view her in the grid also.
I think you can create a Controller to return your target View. And then you call this endpoint to obtain the view as the response and add it into your cellTemplate.
$http.get("https://localhost:44391/Home/GetTemplateFromPartial")
.then(function(response) {
$scope.columns = [
{
name: 'TestColumn',
field: '..xxx',
width: '30%',
cellTemplate: $sce.trustAsHtml(response.data)
}];
console.log($scope.columns);
});
The Controller will return IActionResult
public IActionResult GetTemplateFromPartial()
{
LocalMallUser user = new LocalMallUser
{
id = 1,
age = 18,
user_name = "test_user"
};
return PartialView("_SayHello", user);
}
_SayHello.cshtml:
#model WebApplication1.Models.LocalMallUser
<h1>#Model.user_name</h1>
<h2>#Model.age</h2>
I have a grid that displays a comma-separated list of values, and it has an array that gets used in a template editor for the grid. (On the server, I transform the comma-separated list to an array for the Kendo multiselect AngularJS directive). I have almost everything working: display, edit, and adding values in the multiselect.
There's just one weird thing happening: after I add a value in the multiselect, click Save in the editor, and reopen the editor, the multiselect then only displays one of the most-recently entered values. I know that the values are there and going through the pipeline, because the values make it into the database. I can refresh the page, open the editor, and all the values display in the multiselect correctly, including the one I just added.
It's as if kendo "forgets" most of the values when I reopen the editor. How can this be prevented? Does the MultiSelect need to be rebound to the values? If so, how?
I have tried adding this onChange event, but it had no effect. I've added valuePrimitive to no effect. I tried specifying k-rebind, but it caused an error.
Here's the directive being used in the text/x-kendo-template:
<select kendo-multi-select
id="zipCode"
k-placeholder="'Enter zip codes...'"
style="width: 225px"
k-on-change="dataItem.dirty=true"
k-auto-bind="false"
k-min-length="3"
k-enforce-min-length="true"
k-data-source="options.zipCodeDataSource"
k-data-text-field="'text'"
k-filter="'startsWith'"
k-filtering="options.zipCodeFiltering"
k-no-data-template="'...'"
k-ng-model="dataItem.zipArray"
k-highlight-first="true" />
And this is the DataSource:
options.zipCodeDataSource = new kendo.data.DataSource({
severFiltering: true,
transport: {
read: {
url: serviceUrl + "ZipCode/Get",
type: "GET",
dataType: "json",
contentType: jsonType,
data: function (e) {
// get your widget.
let widget = $('#zipCode').data('kendoMultiSelect');
// get the text input
let filter = widget.input.val();
// what you return here will be in the query string
return {
filter: filter
};
}
},
},
schema: {
data: "data",
total: "Count",
model:
{
id: "text",
fields: {
text: { editable: false, defaultValue: 0 },
}
},
parse: function (response) {
return response;
}
},
error: function (e) {
}
});
If I display {{dataItem.zipArray}} in a <pre> all of the expected values are there.
I wonder if something needs to be added to the edit event handler in the kendo grid definition, but I'm not sure what it would be. I've had to do binding like that for the dropdownlist directive.
edit: function (e) {
if (e.model.marketId === 0) {
e.container.kendoWindow("title", "Add");
} else {
e.container.kendoWindow("title", "Edit");
}
// re-bind multi-select here??
// These two lines actually cause the multiselect to lose pre-existing items in dataItem.zipArray
// var multiselect = kendo.widgetInstance(angular.element('#zipCode'));
// multiselect.trigger('change');
}
...
Update:
This dojo demonstrates the issue.
Run the dojo
Edit the first record in the Contracts grid
Add a zip code such as 22250
Click Save
Then click Edit on the first row again
Only zip code 22250 is displayed in the editor
Also, I notice that if I change k-min-length="3" to k-min-length="1", then the issue goes away. But in the scenario I'm working on, it needs to be 3.
This seems to be an issue with kendo itself. Back then this issue was reported here.
Ok based on the reply from telerik, this issue has been fixed in 2017 R3 SP1 release (2017.3.1018). You can verify it by using this updated dojo example:
http://dojo.telerik.com/IREVAXar/3
I am new to Angularjs. I am having the form data which I need to make a post request to the server passing the data. I have done the UI and controller part inside the angularjs but do not know how to capture the form data. Please find the link to plnkr - Plnkr link
By clicking the add button, a new li element gets added and the same gets deleted when the minus sign is clicked. I need to get all the key value items into the below format for sending for Post request.
{
"search_params": [
{
"key": "search string",
"predicate": "matches",
"value": "choosen text"
},
{
"key": "search string",
"predicate": "not-matches",
"value": " search value"
},
{
"key": "search string",
"predicate": "matches",
"value": " search value"
}
]
}
How to capture the form data and construct the param object inside my controller inside the searchParams function inside the controller. Please let me know as I am new to Angularjs.
Updated Question
Based on the inputs, I am able to get the user details in the controller. But there are few things:
By default there will be one li element and when the user submits, the current li elements data should be captured in the controller.
Only when I add the criteria using the plus button, the array is getting updated, but the last elements data is not being updated in the model when submitted.
The same is holding good for the deleting the criteria too.
Link to updated Plunker - Plnkr Link
Expanding on #Chris Hermut and assuming you want an array of map, according to json you posted. You can do that by
var arr = [];
var form = {
name: 'asd',
surname: 'aasdasdsd',
wharever: 'asd'
}
arr.push(form);
//prentending to be another (key,value)
form.surname = 'hfg';
arr.push(form);
here's a fiddle illustrating just that.
Directives like <select>, <input> require ng-model attribute to correctly bind your input to $scope properties.
In your HTML markup you'll have to update your form elements with required attributes (like ng-model).
I would recommend (in controller/link) to use only one object for form data with different properties like
var form = {
name: '',
surname: '',
wharever: ''
}
Corresponding <input> would be ex. <input ng-model="form.name" type="text">
After you have your 'form' object populated you can do JSON.stringify(form) before your request (if your using some other content-type then application/json).
I am using angular-google-map api http://angular-ui.github.io/angular-google-maps/#!/api
The info window displays on the top of the marker. Is their a way to change it's position to right with the top aligned with the marker? I saw some infowindows fully custom with a custom position and a custom color but we never have the codes or how it is done. Do you have any exemples with the codes or a tutorial to show me? Thanks
UPDATE:
The Infobox instead of the infowindow can do the trick. But I did not manage to find a way to use the infobox with my angular-google-map ui. Can someone please help?
Inside map object you can set inside window.options param pixelOffset
map: {
control: {},
...
window: {
...
options: {
visible: false,
pixelOffset: {
width: -1,
height: -25
}
}
}
I have asked the same question on their support page and got a valuable reply. You can find it here https://github.com/angular-ui/angular-google-maps/issues/1434#issuecomment-130292587
Since infobox is included in the angular google maps library, all you need to do is provide options as follows
windowOptions:{
boxClass: "YOUR CSS CLASS",
boxStyle: { "YOUR STYLE" }
}
and then use it in your view like this
<ui-gmap-google-map>
<ui-gmap-window options="windowOptions"></ui-gmap-window>
</ui-gmap-google-map>
Fiddle: http://jsfiddle.net/Danscho/L789znLk/