Variable Not Rendering with ng-bind - javascript

I'm working on a sample app from the book, AngularJS.
In the following code, {{funding.needed}} doesn't show up as 10 * startingEstimate. It shows up literally, i.e. not rendered, as {{funding.needed}} on the page.
Why?
<html ng-app>
<body ng-controller="TextController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>
<script>
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0};
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
}
</script>
</body>
</html>

You need to remove the TextController as you have not defined this and it's blocking loading other things as it errors. Also you'll need to normalize your use of the $scope.funding object in some places you try to use just the members without the parent reference. The following is a working version (see it working on the plunker at http://plnkr.co/edit/Jz95UlOakKLJIqHvkXlp?p=preview)
<html ng-app>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>
<script>
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0};
$scope.computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
}
</script>
</body>
</html>

Related

I'm trying this example of sessionStorage from an HTML5 tutorial but it is not working and nothing is changing in the 'rightbox' section

The 'rightbox' section must show the key and value entered in the form after they were stored using sessionStorage.
I tried Chrome, Firefox, Edge, and Opera browsers. The code didn't work on any of them.
Here is the code:
function doFirst() {
var button = document.getElementById('button');
button.addEventListener('click', saveStuff, false);
}
function saveStuff() {
var one = getElementById('one').value;
var two = getElementById('two').value;
sessionStorage.setItem(one, two);
display(one);
}
function display(one) {
var rightbox = document.getElementById('rightbox');
var thedata = sessionStorage.getItem(one);
rightbox.innerHTML = 'Name of variable: ' + one + '<br />Value: ' + thedata;
}
window.addEventListener('load', doFirst, false);
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section id="leftbox">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two: <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"></p>
</form>
</section>
<section id="rightbox">
Nothing yet!
</section>
</body>
</html>
The following block from your code:
function saveStuff() {
var one = getElementById('one').value;
var two = getElementById('two').value;
console.log(one, two);
sessionStorage.setItem(one, two);
display(one);
}
You need to use document.getElementById() instead of just getElementById. That will solve your issue.
Furthemore, you have used document.getElementById() properly in your first function, so make sure to check for errors in the browser console next time before posting a question. That will help you in long run.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Replace text with angular

I am trying to replace certain values in a div using angular. The problem is that the div content is generated by an outside service so I cant just add ng-model and be done with it. I've tried the following and some various variations with no luck
var o = angular.element(document.querySelector('#maintwo'));
var r = o[0].innerHTML.replace('TWO','REPLACE');
angular.element(document.querySelector('#maintwo')).innerHTML = r;
plunker
just remove angular.element() from this line, and it will work as you need it : angular.element(document.querySelector('#maintwo')).innerHTML = r;
Do it , like : document.querySelector('#maintwo').innerHTML = r;
if you remove the angular.element() container from the 3rd line it works.
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
</head>
<body>
<button ng-click="replaceText()">
replace
</button>
<div id="maintwo">MAIN TWO</div>
<script>
var myApp = angular.module('myApp', ['ngSanitize'])
function myCtrl($scope) {
$scope.replaceText = function() {
var o = angular.element(document.querySelector('#maintwo'));
var r = o[0].innerHTML.replace('TWO','REPLACE');
document.querySelector('#maintwo').innerHTML = r;
}
}
</script>
</body>
</html>

Function not defined error for a function that's defined inside an angularjs controller

I've looked through other "function is not defined" questions, but can't seem to find one that's applicable to my use case. I'm using angular.js.
I have an initially empty div, #mylist that I am populating dynamically in the js. I have a function defined inside a controller that I'm assigning to onChange event of a checkbox.
Here is the full doc:
<!doctype html>
<html data-ng-app="testapp">
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="angular.min.js"></script>
<script>
var app = angular.module("testapp", []);
app.controller("MyAppController", function ($scope) {
createCheckbox();
function doSomething() {
alert("hello!");
}
function createCheckbox() {
$("#mylist").html("<input type='checkbox' onChange='javascript:doSomething();' />");
}
});
</script>
</head>
<body data-ng-controller="MyAppController">
<div id="mylist"></div>
</body>
</html>
When run, clicking on the checkbox results in the function not defined error.
What am I missing here? Thanks.
<!doctype html>
<html data-ng-app="testapp">
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="angular.min.js"></script>
<script>
var app = angular.module("testapp", []);
app.controller("MyAppController", function ($scope) {
$scope.someProperty = true;
$scope.$watch("someProperty", function (someProperty){
alert("hello!"+someProperty)
});
});
</script>
</head>
<body data-ng-controller="MyAppController">
<div id="mylist"><input type="checkbox" ng-model="someProperty"/></div>
</body>
</body>
</html>
http://jsfiddle.net/y6XhY/
If you use AngularJs, it's good practice to defined function inside you controller scope.$scope's field can be your function and instead of onChange you can use ngChange directive (only you have to set ngModel on that input).
$scope.doSomething = function() {
alert("hello!");
}

What is wrong with my binding?

Before we start I would like to point out that this is day zero using html / js and knockout so I may just have misunderstood how it all works together.
I have made a simple test webapi so I can get to grips with knockout. It is all working so far but for the binding <span data-bind="text:currentMember().name"></span> which I cannot seem to get to work.
The Page
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<script src="Scripts/knockout-2.2.1.js"></script>
<script src="Scripts/jquery-2.0.0.js"></script>
<script src="Scripts/ViewModels/indexViewModel.js" defer="defer"></script>
</head>
<body>
<div id="Content">
<section>
<p>Member Number: </p> <input id="memberNumber" type="text" />
<p>Pin: </p> <input id="memberPin" type="text" />
<input type="submit" value="Get" data-bind="click: getMember" />
</section>
<span data-bind="text:currentMember().name"></span>
</div>
</body>
</html>
The ViewModel
function IndexViewModel() {
var self = this;
self.currentMember = ko.observable();
self.getMember = function () {
var memberNumber = $('#memberId').val();
var memberPin = $('#memberPin').val();
if (memberNumber == '' || memberPin == '') {
memberNumber = '372-001100-134';
memberPin = '123456';
}
$.ajax({
dataType: "json",
url: "http://localhost:25979/api/members/GetMemberByNumberAndPin",
data: {
memberNumber: memberNumber,
pin: memberPin
},
success: function (serviceResponse) {
if (!serviceResponse.hasAlerts) {
self.currentMember(serviceResponse.body);
alert(self.currentMember().name);
}
}
});
};
}
ko.applyBindings(new IndexViewModel());
EDIT: I have changed the code and now the alert does indeed work but the html binding is still not updating.
You have declared currentMember as an observable. And to set the value of an observable, you need to invoke it as a function. So try self.currentMember(serviceResponse.body) instead. If you do self.currentMember = seviceResponse.body as you do, you will essentially re-define the currentMember variable as a regular non-observable variable.
Check the documentation for further explanation.

Why am I getting a "Cannot read property 'nodeType' of null" error with Knockout JS?

Today is the first day for me in Knockout . Got struck with it . Below is my first sample code using knockout.js and it shows an error .
Cannot read property 'nodeType' of null
Here is my script:`
function ViewModel()
{
var self = this;
self.n1 = ko.observable(10);
self.n2 = ko.observable(10);
self.n3 = ko.observable(10);
}
ko.applyBindings(new ViewModel()); `
Here is my html:
<body>
<p>Number1:<input data-bind="value:n1"></input></p>
<p>Number2:<input data-bind="value:n2"></input></p>
<p>Number3:<input data-bind="value:n3"></input></p>
</body>
I want to know the reason for the above error and how to overcome it...
If you set up your code like this, it'll work.
<body>
<p>Number1:<input data-bind="value:n1"></p>
<p>Number2:<input data-bind="value:n2"></p>
<p>Number3:<input data-bind="value:n3"></p>
<script src="knockout.js"></script>
<script>
function ViewModel() {
var self = this;
self.n1 = ko.observable(10);
self.n2 = ko.observable(10);
self.n3 = ko.observable(10);
}
ko.applyBindings(new ViewModel()); `
</script>
</body>
If you want to keep your <script> at the top of the page, you can use jQuery's ready() function to delay the initialization until the page has loaded.
$(document).ready(function() {
ko.applyBindings(new ViewModel());
});
I think ko.applyBindings(obj); should be write under view model.
<!DOCTYPE html>
<html>
<head>
<title>KO Examples</title>
<script type='text/javascript' src='knockout-3.1.0.js'></script>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
var obj = {
first_name : 'Gazal Irish'
};
</script>
</head>
<body>
<div>
<p>My name : <span data-bind="text: first_name"></span>
<p>
</div>
<script type="text/javascript">
ko.applyBindings(obj);
</script>
</body>
</html>

Categories

Resources