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>
Related
I'd like to edit my checkbox so I get a or an input with type=button instead.
I have for now, properly working :
<label>Afficher</label>
<input type="checkbox" ng-model="isElementVisible">
Simply, with my script-angular.js :
$scope.isElementVisible = false ; //it's working, true when I click on my checkbox.
I haven't been using AngularJS for a looong time cause that's an old project and I don't know how to say to the button that my ng-model needs to change, should I do a function or is there an easier way ?
Thanks in advance to you all :3
You can simply handle it in the html using
ng-click="isElementVisible = !isElementVisible"
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.isElementVisible = false;
}]);
.hlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isElementVisible = !isElementVisible">Click to toggle isElementVisible</button>
<div ng-class="{'hlight':isElementVisible}">isElementVisible is {{isElementVisible}}</div>
</div>
How to append choose images one by one to div tag using using ng-repeat when I click Add button after chosen file <input type="file"> in Angular JS. I have tried code below:
<body ng-app="myApp">
<div ng-controller="mainController">
<div>
<h3>Added Images: {{addedImages()}}</h3>
</div>
<div>
<input type="file" id="filename" ng-model="filename" name="">
<button ng-click="test()">Add Image</button>
<div class="shelfgallery"></div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
$scope.imageSources=[];
$scope.test = function(){
var url = ""//facing trouble in getting full URL of choosen image
alert(url);
$scope.imageSources.push({
imges: $scope.filename
});
var element = angular.element($('.shelfgallery'));
element.append('<img id="img_11" ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}" /><br><br>');
//$compile(element)($scope);
};
$scope.addedImages = function(){
return $scope.imageSources.length;
}
});
</script>
</body>
If any wrong here let me know, or any other solution.
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 !
I am wondering how to call the angularjs function by Pressing tab button?
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
</div>
How to call the function using angularJs, after Pressing the firstName and click on tab button. since i am new to angularJs, i know ng-click,ng-change, but i got no idea about this.
please someone help me.
Thanks in advance
You could use ngBlur.
However, it will run the function if you click outside of the input as well as tabbing out.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.tabbedout = function(val) {
console.log("tabbedout: " + val);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName" ng-blur="tabbedout(firstName)"><br>
Last Name: <input type="text" ng-model="lastName" ng-blur="tabbedout(lastName)"><br>
</div>
You say click a button, but I assume you want to handle the tab keydown/keyup events since there is no tab-button to click.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var _this = this;
_this.firstName = '';
_this.handleKeyDown = function($event) {
if ($event.which == 9)
alert('tab was pressed! Current value is: ' + _this.firstName);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
First Name: <input type="text" ng-model="vm.firstName" ng-keydown="vm.handleKeyDown($event)"><br>
</div>
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.