I'm new for Angular and trying to do one exercise and result is not showing on browser.
(function() {
var app = angular.module('bus', []);
app.controller('BusContorller', function() {
this.busbarnd = basname;
});
var basname = {
name: 'tata',
yearprod: 2000,
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- container -->
<div class="container" ng-app="bus">
<!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<!-- Call controller -->
<div ng-controller="BusContorller as bus">
<p>Bus name : {{bus.busbarnd.name}}</p>
</div>
<!--// Call controller -->
</div>
</div>
<!-- // row end -->
</div>
<!-- // container -->
Kindly let me know what I'm doing wrong. I'm thinking I'm making mistake in calling controller.
Try like below
<!DOCTYPE html>
<html ng-app="bus">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<script>
var app = angular.module('bus',[]);
app.controller('BusContorller', function($scope){
$scope.busbarnd = $scope.basname;
$scope.basname = {
name: 'tata',
yearprod: 2000,
}
});
</script>
<body ng-controller="BusContorller">
<div ng-controller="BusContorller as bus">
<p>Bus name : {{busbarnd.name}}</p>
</div>
</body>
</html>
Related
The problem probably lies on two events: onload, onclick (the event onload does work, but the onclick does not). How could I solve this problem in a best way to keep two of them running in the same code? Thanks for any suggestions.
const vacationPlaces = ['Praha','Vien','Munich'];
function backwards() {
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) {
let showPlaces = vacationPlaces[vacationSpotIndex] + ", ";
let removeComma = showPlaces;
document.getElementById("resultMonthly").innerHTML += removeComma;
}
}
function forwards() {
for (let i = 0; i < vacationPlaces.length; i++) {
document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", ";
}
}
function all() {
backwards();
forwards();
}
function click() {
document.getElementById("resultHourly").innerHTML = "hi";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="all()">
<div class="container">
<h2>for loop</h2>
<div class="alert alert-success" role="alert" id="resultMonthly">
</div>
<div class="alert alert-info" role="alert" id="resultDaily">
</div>
<div onclick="click()" class="alert alert-warning" role="alert" id="resultHourly">
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="forloop.js"></script>
</body>
</html>
In the context of the onclick attribute, the function click is a native function. So your click handler is working, but it's calling the built-in click function, not your click function. You can fix that by renaming the function. For example, I named it showAlert:
const vacationPlaces = ['Praha','Vien','Munich'];
function backwards() {
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) {
let showPlaces = vacationPlaces[vacationSpotIndex] + ", ";
let removeComma = showPlaces;
document.getElementById("resultMonthly").innerHTML += removeComma;
}
}
function forwards() {
for (let i = 0; i < vacationPlaces.length; i++) {
document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", ";
}
}
function all() {
backwards();
forwards();
}
function showAlert() {
console.log('clicked')
document.getElementById("resultHourly").innerHTML = "hi";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"crossorigin="anonymous">
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="forloop.js"></script> -->
</head>
<body onload="all()">
<div class="container">
<h2>for loop</h2>
<div class="alert alert-success" role="alert" id="resultMonthly"></div>
<div class="alert alert-info" role="alert" id="resultDaily"></div>
<div onclick="showAlert()" class="alert alert-warning" role="alert" id="resultHourly"></div>
</div>
</body>
</html>
I'm having an issue with ng-repeat on an array of objects:
dummy.json
[
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
]
I can get the number of objects({{factions.length}} or individual item {{factions[0].name}}) and print them individually, but the ng-repeat doesn't create multiple options in the select. I see some other versions of the same question, but they aren't resolved.
I'm including the controller in the body. The scope variable is available, but I'm missing something... Please take a look. Thanks in advance.
tree.js
'use strict';
angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];
//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat"faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>
You are missing the = character between ng-repeat attribute and its value.
'use strict';
angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];
//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat="faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>
Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!
I have been reading this book I tried the first example, but It doesn't render the templates, it only shows the text by default. When I open the console, the app ContactManager exits and it's initialiazed.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="utf-8"> -->
<title>Marionette Contact Manager</title>
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/application.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<span class="brand">Contact manager</span>
</div>
</div>
</div>
<div id="main-region" class="container">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<script type="text/template" id="static-template">
<p>This is text that was rendered by our Marionette app.</p>
</script>
<script src="./assets/js/vendor/jquery.js"></script>
<!--<script src="./assets/js/vendor/json2.js"></script>-->
<script src="./assets/js/vendor/underscore.js"></script>
<script src="./assets/js/vendor/backbone.js"></script>
<script src="./assets/js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion: "#main-region"
});
ContactManager.StaticView = Marionette.ItemView.extend({
template: "#static-template"
});
ContactManager.on("initialize:after", function(){
var staticView = new ContactManager.StaticView();
ContactManager.mainRegion.show(staticView);
});
ContactManager.start();
</script>
Try changing
ContactManager.on("initialize:after", function()
to
ContactManager.on("start", function()
Update your "initialize:after" function by
ContactManager.addInitializer(function(){
var staticView = new ContactManager.StaticView();
ContactManager.mainRegion.show(staticView);
});
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.md
Thanks
The code at the bottom of the page dynamically populates a jQuery Mobile select menu. In addition to populating the menu I'd like to bind data to each menu item and assign a click handler. This is attempted with the following line.
menuItem.bind("click",{testdata: "test"}, clickHandler); $("#testMenu").append(menuItem); }
This approach has worked with jQuery Mobile lists in the past. Can anybody see what's going wrong?
Full Code:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fbObj1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css "/>
<link rel="stylesheet " href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css " />
</head>
<body>
<script>
function clickHandler(e) {
alert("click ");
alert(e.testdata);
};
$(document).ready(function() {
var int = 0;
for (int=0;int<=4;int=int+1)
{
var menuItem = $("<option id=''></option>");
menuItem.html("Item "+int); menuItem.attr('id',int);
//DATA BIND LINE
menuItem.bind("click",{testdata: "test"}, clickHandler);
//menuItem.on("click", {testdata: "test"}, clickHandler);
$("#testMenu").append(menuItem);
}
$("#testMenu").selectmenu('refresh');
$("#testMenu").selectmenu('open'); });
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none">
<select name="testMenu" id="testMenu" data-native-menu="false"></select>
</div>
</div>
</div>
</body>
change
menuItem.bind
to
$("#testMenu").bind
Edit :
function clickHandler(e) {
e.preventDefault();
alert($(this).val());
}
// i forgot to mentioned that for a "select menu" you should use "change" event instead of a "click"
$("#testMenu").on("change",
{testdata: "test"},
clickHandler);
});
Edit 2:
var i = 0;
function clickHandler(e) {
e.preventDefault();
$(":selected",$(this)).html(i).val(i).parent().selectmenu('refresh');
alert($(":selected",$(this)).val());
i++;
}
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css"/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" />
</head>
<body>
<script>
$(document).ready(function() {
function clickHandler(e) {
var listItem = $(":selected",$(this));
alert(listItem.data("test").first);
alert(listItem.data("test").second);
};
var int = 0;
for (int=0;int<=4;int=int+1)
{
var menuItem = $("<option id=''></option>");
menuItem.html("Item "+int);
menuItem.attr('id',int);
menuItem.data("test", { first: int, second: "hello" })
$("#testMenu").append(menuItem);
}
$("#testMenu").on("change",{testdata: "test"}, clickHandler);
$("#testMenu").selectmenu('refresh');
$("#testMenu").selectmenu('open');
});
</script>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none">
<select name="testMenu" id="testMenu" data-native-menu="false">
</select>
</div>