I want to make a <p> appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the <p> tag.
<div id="logo">
<img src="{{selected_.image}}">
<div ng-if="selected_.image == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
</div>
Directive to handle images
var app = angular.module("app", []);
app.directive("imageLoading", function ($rootScope, $timeout) {
return {
restrict: "A",
scope: {
imageLoading: "="
},
link: function (scope, element) {
element.on("error", function () {
element.hide();
scope.$apply(function(){
scope.imageLoading = true;
})
});
}
};
});
<html ng-app="app">
<head>
</head>
<body>
<h4>image 1</h4>
<img image-loading="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
<div ng-show="google">google image not found</div>
<hr>
<h4>image 2</h4>
<img image-loading="google2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div ng-show="google2">google image not found</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
Here, I made working example for that plz check below link.
https://jsfiddle.net/hirojaisinghani/pxwbyuLL/27/
Plz check that.
<div ng-app="ImageDisplay">
<div id="logo" ng-controller="ImageController">
<div>
<h3>
First Image
</h3>
<img ng-if="selected_.image1 != ''" src="{{selected_.image1}}" height="100px" width="50px" /></div>
<div ng-if="selected_.image1 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
<div>
<h3>
Second Image
</h3>
<img ng-if="selected_.image2 != ''" src="{{selected_.image2}}" /> </div>
<div ng-if="selected_.image2 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>
</p>
</div>
</div>
</div>
var app = angular.module('ImageDisplay', []);
app.controller('ImageController', function($scope) {
$scope.selected_ = {
image1:null,
image2:null
};
$scope.selected_.image1= 'https://cdn0.iconfinder.com/data/icons/metro-style-people-svg-icons/48/User_login-512.png';
// alert($scope.selected_.image1);
$scope.selected_.image2 = '';
$scope.discardIntroPage = function() {
alert('Add Photo');
}
});
Related
I added some ng-click events for buttons but when I try to click buttons, test() function won't fire. I did everything to fix that but I couldn't.
<div ng-controller="bilgiyarismasiCtrl" ng-repeat="x in sorular">
<div class="row text-center" style="margin: 50px 250px 50px 250px;">
<div class="col-md-12" style="padding:90px; background-color:gray; color:white;">
{{ x.SORU_ICERIGI }}
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{ x.A_SIKKI }}</button>
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{ x.B_SIKKI}}</button>
</div>
</div>
<br /><br /><br />
</div>
Angular code:
var app = angular.module("module", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "bilgiyarismasi.html",
controller: "bilgiyarismasiCtrl"
});
});
app.controller("bilgiyarismasiCtrl", function ($scope, $http) {
$http.get("http://localhost:53438/api/BilgiYarismasi/GetSorular")
.then(function (response) {
$scope.sorular = response.data;
});
$scope.test = function () {
console.log(1)
}
});
FYI, Your code above is not invoking controller, due to this you are not able get output by clicking on any of your buttons.
Use below code :
var ngApp = angular.module('app', []);
ngApp.controller('bilgiyarismasiCtrl',function($scope, $http){
$scope.sorular = [];
/* $http.get("http://localhost:53438/api/BilgiYarismasi/GetSorular")
.then(function (response) {
$scope.sorular = response.data;
}); */
$scope.test = function () {
console.log('test')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="bilgiyarismasiCtrl">
<div >
<div class="row text-center" style="margin: 50px 250px 50px 250px;">
<div class="col-md-12" style="padding:90px; background-color:gray; color:white;">
{{ x.SORU_ICERIGI }}
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{ 'x.A_SIKKI' }}</button>
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{' x.B_SIKKI'}}</button>
</div>
</div>
<br /><br /><br />
</div>
</div>
</div>
You have not included ng-app in your template file.
I have created a demo, can you please have a look.
Hope this helps you.
I want to enable checkbox when click on
Google
My html code is given below
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showError">
<div class="text">Please fix the validation error(s) below and try again</div>
</div>
<div class="error-msg" ng-show="serviceErrorMsg">
<div class="text">{{serviceErrorMsg}}</div>
</div>
<header class="security-header">
<img src="images/lock.png" alt="Security" class="security">
</header>
<main class="sm-main">
<section class="fix-section security">
<h1>Security and privacy is important to us </h1>
<p>Please read the Google</p>
<label class="control control--checkbox m-t-45">I confirm that I have read, understood and agree to
the above
<input type="checkbox" ng-model="terms.agreed"/>
<div class="control__indicator"></div>
</label>
<span class="error" ng-if="showError">Please select checkbox</span>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="terms.agreed ? 'active' : 'disable'" ng-click="proceed()">Agree</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
My controller code is given below
.controller('agreementCtrl', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
$scope.terms = {
agreed: false
}
$scope.showLoader = false;
$scope.proceed = function () {
if (!$scope.terms.agreed) {
$scope.showError = true;
return;
}
$scope.showLoader = true;
}
}
So I want that when anyone click on Google link only after that my checkbox has to be enable.
You can have an variable and an event handler function in the controller like
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
}
And on the a attach an event handler and use ng-disabled directive on the input
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
Working example
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
</div>
Here's the code snippet of the Angular js app.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
</div>
i have been learning AngularJS. I cannot understand why this simple example fails to work. I have been followng w3cschools tutorial and the syntax seem to perfect align with it. Is it something to with scoping ? or do i have to bind ng-show with model data.
I also did the following but it doesnot seem to work.
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl" >
<button ng-click="thiss=false">Click</button>
<p ng-show="thiss"> This is it</p>
</p>
</div>
Why is placing the controller on the div tag works ? But fails to work when it is in the child element?
It does not work because you have a <p> tag within a <p> tag. It should work if you change you code as follows.
<div ng-controller="myctrl" >
<button ng-click="thiss=false">Click</button>
<p ng-show="thiss"> This is it</p>
</div>
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<div ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</div>
</div>
Check out Why <p> tag can't contain <div> tag inside it? for the reason why <p> cannot include block level elements
Please, don't try to make your HTML standard, follow some rule defined by HTML.
Don't put nested <p> tags. AngularJS sometimes don't work for invalid DOM. I used <span> tag instead of nested <p> works fine.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<span ng-show="thiss">This is it</span>
</p>
</div>
For more information validate HTML. Please, check following HTML code at: https://validator.w3.org/#validate_by_input
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
<p>
</p>
</p>
</body>
</html>
Try this. I have just remove ng-controller from <p> and put it inside div with ng-app. don't know the reason behind this behavior of angularjs but it works as you want.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true" ng-controller="myctrl">
<p>
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
</div>
Try following code.
var app=angular.module("list",[]);
app.controller("myctrl",function($scope){
$scope.get=function(){
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-controller="myctrl">
<p ng-init="thiss=true">
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
try after removing the blank array from the dependency
var app = angular.module('list');
make sure that the controller should be placed in <div ng-controller="myctrl">
Your code:
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
this is how a browser interprets html according to DOM :
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
</p>
<p ng-show="thiss">This is it</p>
<p></p>
therefore the scope of your controller "myctrl" does not apply on nested para,
try using div instead of nested <p>
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<div ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</div>
</div>
How to show the context menu related div on my on click function? How to find the closest next div class and make visible on click on the button event, instead of showing all the div having the same classes.
Please note below my HTML and js also the fiddle link for reference:
http://jsfiddle.net/4WK7R/274/
HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<div class="row">
<button id="mybutton" ng-click="showAlert()">Click me</button>
<div ng-show="myvalue" class="ng-cloak">11111111</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert()">Click me</button>
<div ng-show="myvalue" class="ng-cloak">22222222</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert()">Click me</button>
<div ng-show="myvalue" class="ng-cloak">333333333</div>
</div>
</div>
</div>
JS:
function MyCtrl($scope) {
$scope.myvalue = false;
$scope.showAlert = function(){
$scope.myvalue = true;
};
}
This is what you want i think:
<div ng-app>
<div ng-controller="MyCtrl">
<div class="row">
<button id="mybutton" ng-click="showAlert('div1')">Click me</button>
<div ng-show="div1" class="ng-cloak">11111111</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert('div2')">Click me</button>
<div ng-show="div2" class="ng-cloak">22222222</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert('div3')">Click me</button>
<div ng-show="div3" class="ng-cloak">333333333</div>
</div>
</div>
function MyCtrl($scope) {
$scope.showAlert = function(show){
//edited
$scope[show] ? $scope[show] = false: $scope[show]= true;
//$scope[show] = true;
};
}
Tabs:
function MyCtrl($scope) {
$scope.tabs = [{
title: "tab1",
show: true
}, {
title: "tab2",
show: false
}, {
title: "tab3",
show: false
}, ]
$scope.tabAction = function(tab) {
angular.forEach($scope.tabs, function(tab) {
tab.show = false;
});
tab.show ? tab.show = false : tab.show = true;
}
};
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-repeat="tab in tabs">
<div ng-show="tab.show">{{tab.title}}</div>
<button ng-hide="tab.show" ng-click="tabAction(tab)">
open {{tab.title}}
</button>
<hr>
</div>
</div>
So the title kinda says it all...
I want to use a materialize modal created by angular, only problem I got is it won't initialize correctly. Someone got a sollution?
The angular that gives me an object with values.
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
});
The HTML where I use the modal from materalizecss
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Add Item to list: <!--list name hier--></h4>
<form>
<div class="row">
<div class="input-field col s12">
<label for="item-name">Item Name</label>
<input type="text" name="item-name" ng-model="itemName" id="item-name">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="item-description">Item Description</label>
<input type="text" name="item-description" ng-model="itemDescription" id="item-description">
</div>
</div>
</form>
</div>
<div class="modal-footer">
Add item
</div>
</div>
getList.php
$smt = $dbh->prepare("SELECT lists.name, lists.description, lists.deadline, lists.id FROM users INNER JOIN lists ON (users.id = lists.user_id) AND users.id = ?");
$smt->execute(array(
$user
));
$result = $smt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($result);
print_r($json);
All you need to do is:
First:
Add this script to controller, to initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
Example:
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
//initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
}]);
Next: (Optional)
Use this line if you want to call the model programmatically
$('#modal1').modal('open'); //when you want to open modals programatically
Example:
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
$('#modal1').modal('open');
});
Next: (Optional)
Use "data-target" if you want to display modal on button click.. when using "ng-route" because href won't work because it will affect the ng-route and simply start redirecting pages
data-target="modal1" //instead of href="#modal1"
Example:
<button data-target="modal1" class="btn">Display My Modal</button>
Demo Here
var myApp = angular.module('myApp',[]);
var testController = function($scope, $http){
$(document).ready(function(){
$('.modal').modal();
});
$scope.clicked = function(){
$('#modal1').modal('open');
}
}
myApp.controller("testController",testController);
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script data-require="angular.js#~1.2.2" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<div ng-app ng-controller="testController">
<button data-target="modal1" class="btn">Click Me</button>
<button ng-click="clicked()" class="btn">ng-Click</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>My Modal</h4>
</div>
<div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">close</a>
</div>
</div>
</div>