I'm new to AngularJS and currently struggling with the following problem.
As you can see here in my plnkr I can change the value of the $scope.myDate.value.
The problem now is, that I can't work with this scope in a function, when adding ng-change="barFunc()" to the <input>.
How is it possible to work with ng-change or ng-watch here?
It would be great if someone could make my plnkr work.
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.css" rel="stylesheet">
<style>
input {margin: 45px 0 15px 0;}
pre{padding: 15px; text-align: left;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div ng-controller="foo">
<input type="datetime" class="form-control" date-time ng-model="myDate.value"
ng-change="barFunc()" format="yyyy-MM-dd hh:mm:ss" placeholder="Select datetime">
<pre>myDate: {{myDate.value}}</pre>
<pre>myDate + " abc": {{ custom.value }}</pre>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script>
angular.module('demo', ['datePicker']).controller('foo',['$scope', function($scope){
$scope.myDate = {
value: ''
};
$scope.barFunc = function() {
$scope.custom.value = $scope.myDate.value + " abc";
};
}]);
</script>
</body>
</html>
You have to define $scope.custom before you can access to $scope.custom.value
I would use $watch in this case:
in your controller:
$scope.custom = {
value : ''
};
$scope.$watch('myDate.value', function() {
$scope.barFunc();
});
$scope.barFunc = function() {
$scope.custom.value = $scope.myDate.value + " abc";
};
or in plunkr
You could set up a watcher like this:
$scope.$watch('myDate', function(oldValue, newValue) {
$scope.barFunc(newValue);
});
but you'll also need to define your custom object:
$scope.custom = {
value: ''
};
and it should work. I don't feel like this is the best solution - I generally feel like if I'm setting watchers because I don't understand why something's not working as expected then it's better to figure out why it's not working. I get that's what you're trying to do, and am only offering this as something that would solve your problem quickly if that's what you need.
Related
I'd like to put angular variable in confirm message. After many tries, any solution doesn't work for me:
<a onclick="return confirm('Do you want to manage ' + {{item.name}} + ' with ...?')"
ng-href="/link={{item.ipAddress}}">{{item.name}}</a>
Can anybody help? (Works fine without {{item.name}} in confirm message)
If you're using Angular framework, I would suggest you to use (click) directive.
Then you can use a method defined in the controller linked to the template.
Demo
Component
confirm(item): void{
confirm(`Do you want to manage ${item.name} with...?`);
}
Template
<ul>
<li *ngFor="let item of items" (click)="confirm(item)">{{item.name}}</li>
</ul>
You can access the scope without changing the controller code. You just need to add an id to your controller. Here is what it will look like:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.item = {
"name": "NAME"
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-controller="myCtrl" id="ctrl1">
<a onclick="confirm('Do you want to manage ' + angular.element(document.getElementById('ctrl1')).scope().item.name + ' with ...?')">
{{item.name}}
</a>
</div>
</body>
</html>
As per my understanding of the question, I am writing the best solution as per me, which can help you resolve the issue.
var app = angular.module("app", []);
app.controller("MainController", function($scope, $window) {
$scope.item = {
"name": "Ronit Mukherjee",
"ipAddress": "192.197.85.39"
}
$scope.myFunc = function(name, ipAddress) {
if (confirm("Do you want to manage " + name + " with ...?")) {
$window.location.href = "/link=" + ipAddress;
}
}
});
a {
color: red;
text-decoration: underline;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<a ng-click="myFunc(item.name,item.ipAddress)">{{item.name}}</a>
</div>
</body>
</html>
If you still face any issue, then feel free to comment and clear the doubts.
So i recently learned Angular. For some reason when ever I pull data using {{some.data.goes.here}} in the HTML. The result of this pull does not reflect in the DOM.
(function() {
var app = angular.module('app', []);
app.controller('AppController', function() {
this.product = shirts;
});
var shirts = [{
name: 'BlackShirt',
price: 100,
}
];
})();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="app" ng-controller="AppController as app">
<div class="w3-card-2 w3-border content-panels">
<div class="w3-container w3-center">
<p>{{product.name}}</p>
</div>
</div>
</div>
I am unable to where the issue lies. Please help.
I have tried using the following.
{{product.name}}
{{shirts.name}}
{{product.shirts.name}}
{{shirts.product.name}}
{{app.product.name}}
{{app.shirts.name}}
I dont know what to try anymore. My result arent displaying.
Nevermind it is working now.
I am using this:
{{product.name}}
Wierd how it's working now.
Thanks though.
I am trying to use if statement in knockoutjs with databinding:
for example this if should be false and the text in div should be hidden:
<!-- this is what i am trying to get working. -->
<div data-bind="if: little">rank : little</div>
My guess is this piece does not work as intended. It should return false as on start the the clickCount is 0.
this.little = function(){
return this.clickCount() > 5;
};
I have pasted the code of app.js and index.html.
this is app.js
var ViewModel = function (){
this.clickCount = ko.observable(0);
this.name = ko.observable('Tabby');
this.imgSrc = ko.observable('img/2.jpg');
this.imgAttribution = ko.observable('http://www.flickr.com/photos/big');
this.incrementCounter = function() {
this.clickCount(this.clickCount() + 1);
};
// this is not returning false as it should.
this.little = function(){
return this.clickCount() > 5;
};
}
ko.applyBindings(new ViewModel());
this is index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
</head>
<body>
<div>
<h2 data-bind="text: name"></h2>
<div data-bind="text: clickCount"></div>
<!-- this is what i am trying to get working. -->
<div data-bind="if: little">rank : little</div>
<img src="" alt="cute cat" data-bind="click: incrementCounter, attr:{src: imgSrc}">
</div>
<script src="js/lib/knockout-3.2.0.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Hi you can use visible Binding of knockout
Following code will work for you:
<div data-bind="visible: !little()">rank : little</div>
OR
<div data-bind="visible: little()">rank : little</div>
pls, help me with next question
I try to implement conditional classes on div blocks using ng-class but have encountered next problem - "it is not working". Example seems to be very simple, I even do not know how else it can be described.
But one more idea - controller does not working instead of ng-class.....i do not know.
Here you can see my code pls, probably you will find smth wrong or give me an advice.
http://plnkr.co/edit/Zm0g4QfkqzTD3h4FWfcp?p=preview
demoApp = angular.module('demoApp',[]);
var controllers = {};
controllers.testCntr = function ($scope)
{
$scope.setClass = function()
{
alert('works');
return True;
}
};
HTML
<!doctype html>
<html ng-app="demoApp">
<head>
<title></title>
<style>
.red
{
color:red;
}
</style>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
</head>
<body>
<div ng-controller="testCntr">
<span ng-class="{red: $scope.setClass()}">Test color</span>
<div>{{$scope.setClass()}}</div>
</div>
</body>
</html>
Thanks for your amendments.
Several problems here.
You can only add one controller at a time with .controller()
In your template, $scope is already the context, so don't include it in the HTML
True should be true
You are missing an ng-app directive
angular.js is not included properly
Your scripts.js is not included
Here's a working version of your Plunkr with the changes above: http://plnkr.co/edit/ybDScjDrrIkH8tBNfIg1?p=preview
When you call a function which is in the scope from the view, just call it like that :
<body ng-app="app">
<div ng-controller="Ctrl">
<span ng-class="{'red': setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
</body>
Here the Working Plunkr
You should create an app.js services.js and controllers.js
Your controller should be moved to the controllers.js and look a little something like this.
demoApp.controller('testCntr',function ($scope){
$scope.setClass = (function(){
alert('works');
return True;
})
});
To add the controller to your app you should do this
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function() {
alert('works');
return True;
}
})
Working Plunkr: http://plnkr.co/edit/LPY94jPJdIJX4pr9K5FY?p=preview
Working Demo:
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function() {
alert('works');
return 33;
return True;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" <div="" ng-controller="testCntr">
<span ng-class="{red: $scope.setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
your script.js file should be
var app = angular.module('demoApp',[]);
app.controller('testCntr', ['$scope', function($scope) {
$scope.setClass = function() {
return true;
};
}
]);
and html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<style>
.red {
color:red;
}
</style>
</head>
<body ng-controller="testCntr">
<span ng-class="{red: setClass()}">Test color</span>
</body>
</html>
It may solve your problem
Plunker link: http://plnkr.co/edit/Ftx3M0aG9G8cJtyrn5wj?p=preview
I can't figure out why the ngShow and ngHide directives aren't working. Here is a simplified version of the problem.
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
In controller
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = true;
}
The "contactInfo" div never shows when I click the "callFunction" div.
Your problem is known in the javascript world as "the dot." The idea is that in javascript, native values are passed by value whereas object values are passed by reference. Try changing your view to this:
<div id="callFunction" ng-click="myFunction()">...</div>
<div id="contactInfo" ng-show="content.Show">...</div>
and change your controller to:
$scope.content.Show = false;
$scope.myFunction = function() {
$scope.content.Show = true;
}
The reason this would work is because you're now passing an object around and manipulating an object instead of just manipulating a value. Essentially, think of it as a "sub-scope" problem, where your "div" is spawning its own scope under the view so that variable you're referencing is a native type, it passes by value. Therefore the function updates the parent value but not the child value.
For more information: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
http://jsfiddle.net/aesmzz6q
HTML:
<div ng-controller="theCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</div>
JavaScript:
angular.module('appName', [])
.controller('theCtrl', ['$scope', function ($scope) {
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = !$scope.showContent;
}
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['appName']);
});
There doesn't seem to be anything wrong with what you have. Here's a link to a working example.aesmzz6q
This works for me. I think your problem might be elsewhere.
HTML:
<div ng-controller="MyCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</div>
JavaScript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = true;
}
}
I have to include code to allow the JSFiddle link.
This works fine:
<!DOCTYPE html>
<html ng-app="plunker">
<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.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</body>
</html>
I've added a fiddle: http://plnkr.co/edit/S06ufeHI2j5lKs5LxbRT?p=preview
I have also fixed your fiddle there were a number of things wrong http://jsfiddle.net/97nkv1v1/4/