I have this pure code in HTML
<body style="margin:0px; padding:0px;" onload="load()">
<div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<input type="button" onclick="searchLocations()" value="Search"/>
</div>
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<div id="map" style="width: 100%; height: 80%"></div>
</body>
what i am trying in sencha Touch 2 is
items: [{
xtype: 'fieldset',
title: 'Search Stores',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Adress',
placeHolder: 'Enter City & State or ZIP code'
},
{
xtype: 'selectfield',
label: 'Radius:',
options: [
{text: '25mi', value: '25'},
{text: '100mi', value: '100'},
{text: '200mi', value: '200'}
]
}
]
}]
Actually I am working on finding the store using sencha touch 2 and i follow this link
https://developers.google.com/maps/articles/phpsqlsearch_v3
this works fine for me but this code is not sufficient, now i want to know how can i call this from sencha touch 2 onload="load(), onclick="searchLocations()", visibility:hidden
I read the documentation of sencha touch but not able to do that any help is highly appreciated
Here's equivalent code of your HTML in Sencha touch
<input type="button" onclick="searchLocations()" value="Search"/>
{
xtype: 'button',
text: 'Search',
ui: 'confirm',
listeners : {
tap : function() {
// body of searchLocations()
}
}
}
For visibility:hidden, use the following property of selectfield
hidden: true
For onload="load()", you can call following method of Component.
initialize()
Related
This is my dropddown menu, when I change the option will get alert its working, but when i select again on the same option i didnt get alert.How it posiible
index.html
<body ng-app="demoApp">
<div ng-controller="DemoController">
<div>
<select ng-model="currentlySelected" ng-options="opt as opt.label for opt in options" ng-change="logResult()">
</select>
The value selected is {{ currentlySelected.value }}.
</div>
</div>
</body>
app.js
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
{ label: 'three', value: 3 }
{ label: 'four', value: 4 }
{ label: 'five', value: 5 }
];
$scope.currentlySelected = $scope.options[1];
$scope.logResult = function() {
alert($scope.currentlySelected);
}
});
What I expect is if I select "two" twice i need to alert twice. Is this possible or should I be using a different directive for this?
No, it's not possible. onchange event is fired when selection changes, not when you make a selection. So unless you choose different option, it's not going to fire.
If you need this behaviour I would suggest using one of the custom select solutions, even custom CSS based select would work. Then you could bind to onclick event instead of onchange.
I am working on a angular js project. Right now the controls are static. But client wants to create the html controls based on database.
I have a table with controls specification
For eg:
type : text/dropdown/radio/checkbox
events : onchange/onblur/onfocus
attributes:"color:red"
How can I generate the dynamic model which can parse database value to html controls?
Any help would be really appreciated...
This is pretty easy using the ng-repeat directive. Note how I assign the value of the model back to the scope variable in the ng-repeat. This allows me to retrieve it later.
angular.module('formModule', []).
controller('DynamicFormController', ['$scope',
function($scope) {
//Set equal to json from database
$scope.formControls = [{
name: "Name",
type: "text"
}, {
name: "Age",
type: "number",
color: "red"
},
{
name: "UseNestedControls",
type: "checkbox",
nestCondition: true,
nestedControls: [{
name: "NestedText",
type: "text"
}]
}
];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="formModule">
<div ng-controller="DynamicFormController">
<form>
<div ng-repeat="input in formControls">
<label>{{input.name}}</label>
<input type="{{input.type}}" ng-model="input.value" ng-style="{'color':input.color}" />
<div ng-repeat="nestedInput in input.nestedControls" style="margin-left:20px" ng-show="input.value == input.nestCondition">
<label>{{nestedInput.name}}</label>
<input type="{{nestedInput.type}}" ng-model="nestedInput.value" ng-style="{'color':nestedInput.color}"/>
</div>
</div>
</form>
<div ng-repeat="input in formControls">
<span>{{input.name}} = {{input.value}}</span>
<div ng-repeat="nestedInput in input.nestedControls" style="margin-left:20px">
<span>{{nestedInput.name}} = {{nestedInput.value}}</span>
</div>
</div>
</div>
</body>
I have a quite straightforward select element like that:
<select id="selectCurrency" selectmodel="currencyPair" class="select"
ng-model="currencyPair" ng-options="ft.id as ft.name for ft in contentChart"
ng-change="currencyPairChange(currencyPair)">
</select>
When I drop down the select, focus any option other then the first one and then the controller calls $scope.$apply(), focus is going back to the first option automatically.
I have no clue how to avoid such behaviour.
Any help strongly appreciated.
Got it working. I got the idea from this question. Here is the fiddle.
<div ng-app>
<div ng-controller="SelectCtrl">
{{rate}}
<select id="selectRate" ng-model="rate" data-ng-click="suspendDigest()">
<option ng-repeat="ft in rateChart" value="{{ft.id}}">{{ft.name}}</option>
</select>
</div>
JS:
function SelectCtrl($scope,$interval) {
//$scope.rate='S';
$scope.rateChart = [
{id: 'S', name: 'buy rate'},
{id: 'K', name: 'sell rate'},
{id: 'R', name: 'average rate'}
];
setInterval(function(){
$scope.$apply();
}, 2000);
}
I am having trouble getting the knockoutjs checked binding to work properly. Not sure if I'm just doing something wrong or what. I have this piece of html
<ul data-bind="foreach: ListItems" >
<li style="padding-left: 0px; margin-left: 0px; color: white; font-size: 12px;">
<div class="title" style="margin-right: 3em; line-height: 20px;">
<input type="checkbox" data-bind="checked: IsActive" />
<label data-bind="text: Quantity, disable: IsActive"</label>
<label data-bind="text: Description, disable: IsActive" ></label>
</div>
</li>
</ul>
Where I want a checkbox that allows users to mark items off this list by clicking the checkbox which should either strikeout the text or grey it out or something.
My view model is created by getting the following json data format.
{"$id":"1","Description":"New List","Categories":
[{"$id":"2","Description":"Bread/Bakery","ListItems":
[{"$id":"3","IsActive":1,"Description":"Bread","Quantity":"1 Loaf"}]},
{"$id":"4","Description":"Beverages","ListItems":
[{"$id":"5","IsActive":1,"Description":"Coke","Quantity":"1 Case"},
So the problem is that checking the checkbox doesn't actually do anything here. It should be disabling the other labels but it doesn't. All my other values are displayed correctly and if I do a data-bind=text: IsActive I can see the value that should be changing with the checkbox but it never changes.
Edit: following suggestion below:
var mydata = ko.observableArray([
{
Categories: ko.observableArray([
{
Description: "Dairy", ListItems: ko.observableArray([
{ Description: "Eggs", Quantity: "1 Dz.", IsActive: ko.observable(false) },
{ Description: "Milk", Quantity: "1 Gallon", IsActive: ko.observable(false) }
])
},
{
Description: "Produce", ListItems: ko.observableArray([
{ Description: "Lettuce", Quantity: "1 Head", IsActive: ko.observable(false) },
{ Description: "Oranges", Quantity: "5 ea.", IsActive: ko.observable(false) },
{ Description: "Greenbeans", Quantity: "1 Thingy", IsActive: ko.observable(false) },
])
},
])
}
]);
The issue you are having is because your data is a plain JSON object and that will get bound only once.
To get the bidirectional binding behaviour you are looking for, your objects need to be "observables", so for example:
var mydata = ko.observable({
Categories: ko.observableArray([
{ IsActive: ko.observable(true) }
])
});
Note that it is up to you to determine which items in your structure need to be observables; it will depend on how you want the bindings to behave.
So, just getting started in Angular and it's pretty tricky, coming from a pretty simple JS and jQuery background. Here's what I'm trying to do. I have a "tag template" that has a couple categories and then some sub-tags contained within. I have defined these as an object, with the idea that the object/file can be called via file request and manipulated, etc.
I have loaded labels and tag category inputs dynamically by using a factory service and a controller with ng-repeat. Likewise, I have deposited the subtags into another div on page2 (using jQuery mobile page swiping). I'd like to use the checkbox state of the category tags to show/hide the sub-tags on page2.
I have tried dozens of things and searched all over stackexchange, the net, etc, but is simple and straightforward and similar enough for me to get it working. If someone can point me in the right direction, that would be great. Keep in mind that my next step is to add a button on page 1 to add a new category, and buttons on page 2 to add sub-tags to the sub-tag categories.
Finally, I have one more weird thing to report. If I only have two pages in my DOM, I have some weird behavior when loading the page. If I load from page 1, the tag checkboxes do not function, and I see a slight fattening of the border of the labels. If I swipe left to page 2 and reload from this page, the borders of the labels are thin and the checkboxes function. Cannot track down why this would be happening. My hacky workaround is to add an empty page zero and then changepage immediately to page one, but this is far from ideal. Any thoughts on that would be appreciated as well.
Here it is:
HTML
<!-- Angular version -->
<button class="ui-btn" onclick="selectTemplate();">My Template</button>
<form>
<div data-role="controlgroup">
<fieldset data-role="controlgroup">
<div ng-controller="templateCtrl">
<label
class="ui-checkbox"
ng-style="{backgroundColor: '{{tagCat.color | bgColor}}'}"
ng-repeat="tagCat in template"><input type="checkbox"
class="ui-checkbox"
id="{{tagCat.name}}"
ng-model="clicked"
ng-click="click();"
/>{{tagCat.name}}</label>
<div ng-repeat="tagCat in template">{{cb}} {{tagCat.name}} hallo</div>
</div>
</fieldset>
</div>
<div style="display:none" class="flashNotification"></div>
</form>
</div>
<div data-role="page" id="two">
<button class="ui-btn" onclick="selectTemplate();">My Template</button>
<form>
<div data-role="controlgroup">
<div ng-controller="templateCtrl">
<div ng-repeat="tagCat in template" ng-show="clicked" class="{{tagCat.name}}">{{tagCat.name}}
<fieldset data-role="controlgroup">
<label class="ui-checkbox"
ng-repeat="item in tagCat.items"
ng-style="{backgroundColor: '{{tagCat.color | bgColor}}'}"
for="item.name">{{tagCat.color | bgColor}}
<input class="ui-checkbox"
name="{{item.name}}"
id='{{item.name}}'
type="checkbox" />{{item.name}}</label>
</fieldset>
</div>
</div>
</div>
<div style="display:none" class="flashNotification"></div>
</form>
</div>
</div>
JS for jQuery Mobile
$(document).ready(function() {
// addTemplateItems(tagTemplate); // not necessary with Angular
// $.mobile.changePage('#two', { transition: 'none' }); // required or checkboxes don't work on load
$.mobile.changePage('#one', { transition: 'none' });
// // $("[data-role=controlgroup]").controlgroup("refresh");
// set up page nav
$(document).delegate('.ui-page', "swipeleft", function(){
var $nextPage = $(this).next('[data-role="page"]');
var $prevPage = $(this).prev('[data-role="page"]');
console.log("binding to swipe-left on "+$(this).attr('id') );
// swipe using id of next page if exists
if ($nextPage.length > 0) {
$.mobile.changePage($nextPage, { transition: 'slide' });
} else {
var message = 'tagged!';
// save tags here
flashNotify(message);
console.log('fire event!');
$('#flashNotification').promise().done(function () {
$('#group1').hide();
$('#group2').hide();
$('.ui-btn').hide();
// addTemplateItems(tagTemplate);
$.mobile.changePage($prevPage, { transition: 'none' });
captureImage();
});
}
}).delegate('.ui-page', "swiperight", function(){
var $prevPage = $(this).prev('[data-role="page"]');
console.log("binding to swipe-right on "+$(this).attr('id') );
// swipe using id of next page if exists
if ($prevPage .length > 0) {
$.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
} else {
alert('no backy backy!');
}
});
// $("input[type='checkbox']").checkboxradio().checkboxradio("refresh");
});
JS for Angular App
var app = angular.module('STL', []);
app.factory('TagTemplate', [function () {
var TagTemplate = {};
var tagTemplate = {
family: {
name: "family",
description: "These are your family members.",
color: "red",
items: [
{
name: "Joe"
},
{
name: "Mary"
},
{
name: "Jim"
}
]
},
design: {
name: "design",
description: "Different types of design notes.",
color: "blue",
items: [
{
name: "inspiring"
},
{
name: "fail"
},
{
name: "wayfinding"
},
{
name: "graphics"
}
]
},
work: {
name: "work",
description: "Stuff for work.",
color: "green",
items: [
{
name: "whiteboard"
},
{
name: "meeting"
},
{
name: "event"
}
]
}
};
TagTemplate = tagTemplate;
return TagTemplate;
}])
// Controller that passes the app factory
function templateCtrl($scope, TagTemplate) {
$scope.template = TagTemplate;
$scope.click = function(model) {
console.log(this.checked, this.tagCat.name);
}
}
app.filter('bgColor', function () {
return function (color) {
// console.log(color, $.Color(color).lightness(.05).toHexString(.05));
// var rgba = $.Color(color).alpha(.05);
return $.Color(color).lightness(.97).toHexString();
}
})
For the main part, success!
I found a jsfiddle that gave me a good base for experimenting. After some playing, I realized that I just have to create a show property within each of the categories in my data service model, and then assign the ng-model to that property to control it.
I had to do it slightly differently in my own code, but the understanding gained from the following jsfiddle led me to the answer:
http://jsfiddle.net/Y43yP/
HTML
<div ng-app ng-controller="Ctrl">
<div class="control-group" ng-repeat="field in customFields">
<label class="control-label">{{field}}</label>
<div class="controls">
<input type="text" ng-model="person.customfields[field]" />
<label><input type="checkbox" ng-model="person.show[field]" /></label>
</div>
</div>
<button ng-click="collectData()">Collect</button><button ng-click="addField()">Add Field</button><br/><br/>
<em>Booleans</em>
<div ng-repeat="field in customFields">
<p>{{field}}: {{person.show[field]}}</p>
</div>
<em>Show/Hide</em>
<div ng-repeat="field in customFields">
<p ng-show="person.show[field]">{{field}}: {{person.customfields[field]}}</p>
</div>
</div>
JS
function Ctrl($scope) {
$scope.customFields = ["Age", "Weight", "Height"];
$scope.person = {
customfields: {
"Age": 0,
"Weight": 0,
"Height": 0
},
show: {
"Age": false,
"Weight": false,
"Height": false
}
};
$scope.collectData = function () {
console.log($scope.person.customfields, $scope.person.show);
}
$scope.addField = function () {
var newField = prompt('Name your field');
$scope.customFields.push(newField);
}
}
Still having the checkbox issue but I'll open a separate issue for that if I can't figure it out.
Thanks.