Good morning everybody,
I am new in Onsen UI, using Angular JS v1.6.1 and Onsen UI v2.
I can’t figure out why my data binding does not work. CSS and JS files seem to load OK but when I open the html file :
1 - button does not show the notification when I click it
2 - The text “Default” does not appear and {{myName}} shows instead
3- Filling the input fill does not update {{myName}}
I have followed the Onsen UI guide (https://onsen.io/v2/docs/guide/angular1/)… I do not understand what could be the problem. I would be very grateful if some of you guys could help me on this topic.
Have a good day !
Cedric
<!doctype html>
<html lang=“en” ng-app=“my-app”>
<head>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“onsenui/css/onsenui.css”/>
<link rel=“stylesheet” href=“onsenui/css/onsen-css-components.css”/>
<script src=“js/angular.min.js”></script>
<script src=“onsenui/js/onsenui.js”></script>
<script src=“onsenui/js/angular-onsenui.js”></script>
<script>
var module = angular.module('my-app', ['onsen']);
module.controller('AppController', function() {
ons.notification.alert('Welcome !');
$scope.myName = "Default";
$scope.clickHandler = function(event) { ons.notification.alert('Hello ' + $scope.myName);}
});
</script>
</head>
<body ng-controller=“AppController”>
{{myName}}
<br> <br>
<ons-input ng-bind=“myName” placeholder=“Your Name” float></ons-input>
<br> <br>
<ons-button ng-click=“clickHandler”>Say Hello</ons-button>
</body>
</html>
Replace all “ with either " or '.
Inject $scope into your controller:
module.controller('AppController', function($scope) { ...
Change:
ng-click="clickHandler"
To:
ng-click="clickHandler()"
Demo: http://plnkr.co/edit/HomH2oTmESLrs7zSrKei?p=preview
Thanks again for your help. Regarding the text data binding with the input, I nearly managed to fix it as well:
<script>
var app = angular.module('myApp', ['onsen']);
app.controller('todoCtrl', function($scope) {
ons.notification.alert('welcome!');
$scope.name = 'Default';
$scope.clickHandler = function(event) {
ons.notification.alert('Hello ' + $scope.name);
}
});
</script>
</head>
<body>
<ons-span ng-bind='name'></ons-span>
<br>
<ons-input ng-model='name' placeholder='Your Name' float></ons-input>
<br>
<ons-button ng-click='clickHandler()'>Say Hello</ons-button>
</body>
</html>
Each time I click on the "Say Hello" button, data binding updates itself :
However it does not updates automatically without clicking the button.
I observed that if I replace "ons-input" by "input", the data binding updates automatically but I loose the Onsen style of the input... I would like to keep all my html elements as ons- if possible.
Thank you very much !
Related
I'm developing an ionic v1 app in which, when I'm typing the mobile number, the network name and circle name should get automatically updated in the dropdown as like the applications like PayTM, etc...
I'm having a database already in which networks have been split based on the first 4 digits of the mobile number. How to pass a request when a mobile number is being typed?
Please suggest some ideas to do that.
you can use angular 1 ng-change
View.html
<input type="text" ng-model="mobilenumber" ng-change="updateotherfields()" />
Controller.js
app.controller('yourCtrl', function($scope) {
$scope.mobilenumber;
$scope.updateotherfields = function(){
if($scope.mobilenumber){
//check the length
if($scope.mobilenumber.length > 4){
console.log($scope.mobilenumber);
var firstfournumbers = $scope.mobilenumber.slice(0, 4);
//now you have your fournumbers
//Do you server code and then update the combobox Model
}
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
First Name: <input type="text" ng-model="number">
</form>
<button ng-click="submit(number)">Check</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.number;
$scope.submit = function(number){
console.log(number)
var res = number.slice(0, 4);
console.log(res)
}
});
</script>
</body>
</html>
send 'res' value to server, search db table using that 4 digit value, get the detail of network
I would know if it's possible to change the marquee content message with a selectbox ?
If I choose "Option1" or "Option2" etc..
The marquee has to change the message and display "Option1" or "Option2" etc..
Using AngularJs.
try this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$filter) {
$scope.titles = ["title1","title2"];
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="title" ng-options="title as title for title in titles"></select>
<marquee>{{title}}</marquee>
</div>
I have two divs on a page, outer and inner. The outer one has same styling everywhere on the page, so I would like to repeat it using ng-repeat (what actually works fine). The inner one should contain different content, which I would like to insert from different html templates using ng-include directive. The code I wrote does not show me any error messages, however does not work. Could you please see what I am doing wrong? Thanks.
<html lang="en" ng-app="myApp">
<body ng-controller="myCtrl as ctrl">
<div id="outer" ng-repeat="tpl in ctrl.templates">
<div id="inner" ng-include="tpl.templates">
</div>
</div>
<script>
var app = angular.module('myApp', [])
.controller('myCtrl', [function() {
var self = this;
self.templates = [
{template: 'template.htm'},
{template: 'template2.htm'},
{template: 'template3.htm'},
{template: 'template4.htm'}
]
}]);
</script>
</body>
</html>
I don't really know if it is right but i guess there is an error in
ng-include="tpl.templates"
I think it should be :
ng-include="tpl.template"
(removed "s" from templates)
I'm trying to add the wysiwyg nicEdit text editor to my text areas. When I goto the actual templateUrl the textbox and tool bar do work but they do not submit correctly (to my firebase db). When I goto the page that is to render the template I am unable to get get nicEdit toolbar features and just get a regular text area box. I'm using angularjs and have the templateurl as addPost.html.
So again the template does render when I goto #/addPost but not with the working nicEdit features, yet going directly to the template url addPost.html does have the nicEdit features working but then won't submit to my firebase db. Anyone have an idea on why this is so? Thanks.
Template file addPost.html:
<head>
<script type="text/javascript" language="javascript" src="../nicEdit.js"></script>
<script type="text/javascript" language="javascript">
bkLib.onDomLoaded(nicEditors.allTextAreas);
</script>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="blog-nav">
<a class="blog-nav-item " href="#/welcome">Home</a>
<a class="blog-nav-item active" href="#/addPost">Add Post</a>
<a class="blog-nav-item " style="cursor:pointer;" ng-click="logout();">Logout</a>
</nav>
</head>
<body ng-controller="AddPostCtrl">
<div class="container" >
<form class="form-horizontal" ng-submit="AddPost()">
<fieldset>
<!-- Form Name -->
<legend>Create Post</legend>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
</div>
</fieldset>
</form>
</div><!-- /.container -->
</body>
addPost.js
'use strict';
angular.module('myApp.addPost', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
});
}])
.controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase, $location,CommonProp) {
if(!CommonProp.getUser()){
$location.path('/main');
}
$scope.logout = function(){
CommonProp.logoutUser();
}
$scope.AddPost = function(){
var title = $scope.article.title;
var date = $scope.article.date;
var post = $scope.article.post;
var firebaseObj = new Firebase("http://..");
var fb = $firebase(firebaseObj);
fb.$push({ title: title, date: date, post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
$location.path('/welcome');
}, function(error) {
console.log("Error:", error);
});
}
}]);
Going to #addPost shows the template with out nicEdit working
But going to the actual templateUrl addPost.html it works fine, minus not being able to submit
The problem has to do with trying to run scripts Angular html partials. The simple solution is to move the scripts you need to the head of your main index file, outside of ng-view, though it does seem (according to other stackoverflow posts) technically possibly to try to get these scripts to execute:
"AngularJS: How to make angular load script inside ng-include?"
https://stackoverflow.com/a/19715343/1078450
(Also, you have html in your head file that is not likely to be rendered: <nav class="blog-nav">)
Well, I have had the same problem, with initialisation of NicEdit in templates.
First I used onDomLoaded() else, but it's better to wait for the document. With jQuery I use document.ready.
Take a look here, pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
The problem is to tell NicEditor the new textarea.
Here a code sample to do this in jQuery.
var idnr = 0;
var NicEditor = new nicEditor();
$('#add').click(function(){
var $clone = $('#dummy').clone();
var id = 't_' + idnr;
idnr = idnr + 1;
$clone.attr('id',id).attr('name',id).removeClass('dummy');
$('#wrapper').append($clone);
NicEditor.panelInstance(id);
$(nicEditors.findEditor(id).elm).focus();
});
And here is a working Example of dynamic NicEdit use.
I'd like to pass HTML back to the webpage but it is coming through as literal. Any ideas what I'm doing wrong?
HTML:
<div ng-app="app" ng-controller="ctrl">
{{price}}
<br>
Only <strike>$49</strike> $29
</div>
Angular:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope,$sce){
$scope.price = $sce.trustAsHtml('Only <strike>$'+49+'</strike> $'+29);;
});
Output:
Only <strike>$49</strike> $29
Only $49 $29
Example: http://jsfiddle.net/eyks7zu9/3/
Below is your code, with a <span> tag added that has an ng-bind-html value. I could be totally wrong, as I'm not the best with angular myself, but I don't believe that what you are trying to do will work as you intend as Angular tries to keep the Sandbox model pretty rigid with regards to HTML injection.
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $sce) {
$scope.price = $sce.trustAsHtml('Only <strike>$' + 49 + '</strike> $' + 29);;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span ng-bind-html="price"></span>
<br>Only <strike>$49</strike> $29
</div>