HTML page in AngularJS.
My ng-show won't show div when boolean is set true.
This is my HTML file:
<div class="container">
<div ng-if="!query" ng-hide="editBoolean">
<h3>{{article.id}} - {{article.title}}</h3>
<h4 ng-bind-html="article.text"></h4>
<button ng-click="edit(true)">Endre tekst</button>
</div>
<div ng-show="editBoolean">
<style>
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
</style>
<input type="text" ng-model="article.title" value="{{article.title}}">
<div text-angular="text-angular" ng-model="article.text"></div>
<button ng-click="update(article.text, article.title)">Lagre</button>
<button ng-click="edit(false)">Avbryt</button>
</div>
<div ng-if="query">
<h3>{{query}}</h3>
</div>
This is my controller.js file:
// Article controller
wikiControllers.controller('articleController', ['$scope', 'articleService', '$routeParams', '$sanitize',
function($scope, articleService, $routeParams, $sanitize){
$scope.editBoolean = false;
$scope.edit = function(editValue){
this.editBoolean = editValue;
console.log(this.editBoolean);
};
}]);
When i have console.log my booleanfil, it shows true(The value is changed)
this:
this.editBoolean = editValue;
should be:
$scope.editBoolean = editValue;
Related
I have a very simple app that has a splitter (onsenui) menu that opens different templates from index.html.
In index.js I declare a controller that should be bound to one of the template pages in index.html. I can follow with the debugger and watch the controller code be accessed during the first time the page is loaded, I assume it is being called on initial assignment, but afterwards the method advance() is never called when the button that should call it is pressed.
The method is assigned to the button using the ng-click directive.
Everything else works, it is only the controller and onclick that is not.
index.html :
<template id="traditionalrosary.html">
<div>
<ons-page id="traditionalrosary" ng-controller="traditionalRosaryController">
<link rel="stylesheet" href="css/traditionalrosary.css">
<body>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Logo
</div>
</ons-toolbar>
<ons-card style="width:25vw; height 50vh; margin: auto;">
<img id="logoImage" class="img-responsive" src="img/logo.jpg" style='height=33vh; width=33vw; object-fit: cover; margin: auto;'>
</ons-card>
<ons-card style='left:50vh; width:75vw; height 50vh; margin: auto; object-fit: contain;'>
<textarea class="textarea" ng-model="textstuff" ng-init="textstuff = 'Hello now'" style="display: block; width: 100%; height 50vh; object-fit: contain; margin: auto; " value="OK" ' rows="10" placeholder="Textarea">
</textarea>
</ons-card>
<ons-button modifier="large" ng=click="advance()">advance</ons-button>
</body>
</ons-page>
</div>
</template>
controllers.js:
myApp.controller("traditionalRosaryController", function($scope) {
$scope.textstuff="nom nom";
$scope.advance=function()
{
$scope.textstuff="awesome";
};
});
index.js
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
You have a typo in your HTML
Change ng=click="advance()" to ng-click="advance()"
Note the dash rather than the equals sign.
I created a function validateCode() and when a user clicks on the button validateCode() will trigger.
I want to change the height of the <div class="loginForm"> </div> when the button clicks.
I was trying : http://jsfiddle.net/Lvc0u55v/10358/
Here is a solution using ngClass:
angular
.module('LoginForm', [])
.controller('mainController', [function() {
var self = this;
self.validateCode = function() {
self.setLoginFormModified = true;
};
}]);
.loginForm {
height:140px;
width:150px;
background-color:blue;
}
.loginFormModified {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section
ng-app="LoginForm"
ng-controller="mainController as ctrl"
ng-class="{'loginForm': true, 'loginFormModified': ctrl.setLoginFormModified}">
<button ng-click="ctrl.validateCode()">
Click me
</button>
</section>
This is another method you can take into consider too.
This is suitable for simple style changing. It is suggested to create function to modified multiple styles, if you have more complicated cases.
.loginForm {
height: 140px;
width: 150px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<section class="loginForm" ng-app="LoginForm"
ng-controller="mainController" ng-style="modified&&{'height':'500px'}">
<button ng-click="modified=true">
Click me
</button>
</section>
<script>
var app = angular.module('LoginForm', []);
app.controller('mainController',[function(){}]);
</script>
define two style properties as follow :
<style>
.loginFormInitialStyle{
height:140px;
width:150px;
background-color:blue;
}
.loginFormChangeStyle{
height:500px;
width:150px;
background-color:blue;
}
</style>
then use ng-class instead of class as follow
<div ng-class="loginForm"></div>
then define $scope.loginForm object with two properties loginFormInitialStyle and loginFormChangeStyle with default values.
$scope.loginForm = {"loginFormInitialStyle":true, loginFormChangeStyle:false}
then in your on-click function just change the values of loginFormObject
$scope.onClick = function(){
$scope.loginForm = {"loginFormInitialStyle":false, loginFormChangeStyle:true}
}
When I click on show5 and then goto5 it works as expected, but when I click on showngo5 its not working as expected, even though the same methods are called.
Why is showngo5 not working in this plunker
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example51-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="anchorScrollOffsetExample" ng-controller="headerCtrl">
<div class="fixed-header">
<a href="" ng-click="gotoAnchor(x.i)" ng-repeat="x in ids" ng-show="x.visible">
goto{{x.i}}
</a><br/>
<a href="" ng-click="toggle(x)" ng-repeat="x in ids">
<span ng-show="x.visible">hide</span><span ng-show="!x.visible">show</span>{{x.i}}
</a><br/>
<a href="" ng-click="showngo(x)" ng-repeat="x in ids">
<span ng-show="x.visible">hide</span><span ng-show="!x.visible">showngo</span>{{x.i}}
</a>
</div>
<div id="anchor{{x.i}}" class="anchor" ng-repeat="x in ids" ng-show="x.visible">
Anchor {{x.i}} of 5
</div>
</body>
</html>
js:
(function(angular) {
'use strict';
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 100; // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.ids = [
{i:1,visible:true},
{i:2,visible:true},
{i:3,visible:true},
{i:4,visible:true},
{i:5,visible:false}
];
$scope.toggle = function(x) {
if(x.visible){
x.visible=false;
}else{
x.visible=true;
}
};
$scope.showngo = function(x) {
$scope.toggle(x);
$scope.gotoAnchor(x);
};
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
$location.hash('anchor' + x);
} else {
$anchorScroll();
}
};
}
]);
})(window.angular);
css:
body {
padding-top: 100px;
}
.anchor {
background-color: DarkOrchid;
margin: 2px;
padding: 10px 10px 300px 10px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 100px;
position: fixed;
top: 0; left: 0; right: 0;
}
.fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
change this code on line #25 JS file
$scope.gotoAnchor(x.i);
The problem is you try to passing x object into gotoAnchor function rather then a number.
Update showngo function by below code. issue in your code is that when you call $scope.gotoAnchor(x); inside showngo method it will scroll to anchor[Object,Object] instead of scrolling anchor5 because whole object is passed inside x.
$scope.showngo = function(x) {
$scope.toggle(x);
$scope.gotoAnchor(x.i);
};
I'm trying to set a different background image on the body of my separate partials.
But the images are just being loaded into the div area and not the whole body as i wanted, could any one of you be having an idea on how to solve this?
Here is my code
angular.module('controller',[])
app.controller('AboutCtrl',['$scope', function($scope){
$scope.title="The About page"
}])
app.controller('ServiceCtrl',['$scope', function($scope){
$scope.title="Our services page"
}])
app.controller('ContactCtrl',['$scope', function($scope){
$scope.title="How to contact us page"
}])
app.controller('MyCtrl', ['$rootScope', function ($rootScope) {
$rootScope.bgimg = "img/home.jpg";
}])
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
<body >
<div id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
</div>
</body
Can you not just move your main controller up to the body tag?
<body id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
<div ng-controller="OtherCtrl">
As I mentioned in my comments you create a service that holds the background variable. Then you create get/set methods to allow you to make changes.
var app = angular.module('controller',[])
.service('SessionService', function(){
var vm = this;
this.bgImg = "https://c1.staticflickr.com/1/31/37271521_47df0e4547_b.jpg";
return {
setBgImg: function(newBgImg){
vm.bgImg = newBgImg;
},
getBgImg: function(){
return vm.bgImg;
}
}
})
Then you inject the SessionService into the Main controller you have set on Body. And call the get method to retrieve the background variable.
app.controller('SessionCtrl', ['$scope','SessionService',function($scope, SessionService) {
this.getBgimg = SessionService.getBgImg;
}]);
<body id="bg img" ng-controller="SessionCtrl as vm" style="background-image: url({{ vm.getBgimg() }})">
Finally for every Controller you'd like to make the change, inject the service into the controller as well and call the Set method. In this example I have it being called from a button click function.
app.controller('ContactCtrl',['$scope','SessionService', function($scope,SessionService){
$scope.ContactTitle="How to contact us page";
$scope.winter = "";
$scope.changeBg = function(){
SessionService.setBgImg('http://alvaradoconsultinggroup.com/wp-content/uploads/2014/10/success.jpg');
}
}]);
<div ng-controller="ContactCtrl">
<p style="font-size: 25px;color: white;">{{ContactTitle}}</p>
<button ng-click="changeBg()">Change Back</button>
</div>
I piggybacked off Brian Baker's plunker to show you the changes in action here.
https://plnkr.co/edit/RjgwdwuOFJgMct4y3qUS?p=preview
I'm developing an AngularJS Ionic Meteor app, and I need to change the background color of the botton box of an ionic card depending of it contents (a float). The ranges are:
data<=80
81 < data <= 160
161 < data <= 233
234 < data<= 317
318 < data <= 400.
Is there a CSS way to do it, or an AngularJS way instead?
You could use ngClass. Just setup your CSS background-color properties and set in your controller the appropriate class, for example:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.submit = function() {
if ($scope.data <= 80) $scope.rangeColor = "red";
// Add more conditional statements
else $scope.rangeColor = "blue";
}
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<form ng-submit="submit()">
<input type="text" name="data" ng-model="data" required>
<input type="submit" id="submit" value="Submit" />
</form>
<br />
<div ng-class="rangeColor" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could also implement the conditional statements in your HTML elements:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<input type="text" name="data" ng-model="data" required>
<br />
<br />
<div ng-class="{'red': data <= 80, 'blue': data > 80}" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could use
ng-style
https://docs.angularjs.org/api/ng/directive/ngStyle
or
ng-class