I'm new to angular. Just trying to replicate this jsfiddle to play with nodes, but the angular is not working. First, the jsfiddle is confusing my as the application names are not he same. Secondly, it looks like and old version. What am I doing wrong when setting up the application. Is something missing with the templates, or the order of scripts out of place?
<html>
<head>
<script src="https://code.angularjs.org/angular-1.0.0rc8.js"></script>
<style>
ul {
list-style: circle;
}
li {
margin-left: 20px;
}
</style>
</head>
<body>
<script type="text/ng-template" id="tree_item_renderer.html">
{{data.name}}
<button ng-click="add(data)">Add node</button>
<button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ul>
</script>
<ul ng-app="Application" ng-controller="TreeController">
<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>
<script>
angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
$scope.delete = function(data) {
data.nodes = [];
};
$scope.add = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: []});
};
$scope.tree = [{name: "Simon", nodes: []}];
}]);
</script>
</body>
</html>
ng-appshould target a module. Try ng-app="myApp".
Related
I am very new to angular js and I have been hanging around with api. The following code shows the name of the user and the name of the user when it is clicked. What I'm trying to do is I want the user to get the todos title when the button is clicked. https://jsonplaceholder.typicode.com/todos. how can I do that ? I know it's a bit confusing, but I'm waiting for you guys.
jsonplaceholder.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="script.js"></script>
<head>
<title>JsonPlaceHolder</title>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.name }}
<button ng-click="getResult($index)">Click</button>
</li>
</ul>
<h2>Results</h2>
<p><code>Title : </code> {{indexResult.name}}</p>
</div>
</body>
</html>
script.js
var app = angular.module('myApp', []);
var root = 'http://jsonplaceholder.typicode.com/users';
app.controller('customersCtrl', function($scope, $http) {
$http.get(root).then(function (response) {
$scope.myData = response.data;
});
$scope.getResult = function($index) {
$scope.indexResult = $scope.myData[$index];
};
});
I write your code like this:
var app = angular.module('myApp', []);
var root = 'http://jsonplaceholder.typicode.com/users';
var todos= 'https://jsonplaceholder.typicode.com/todos'
app.controller('customersCtrl', function($scope, $http) {
$http.get(root).then(function (response) {
$scope.myData = response.data;
});
$scope.getResult = function(item) {
$scope.titleList = [];
$http.get(todos).then(function (response) {
$scope.todosList = response.data; }).then(()=> {
$scope.todosList.map(it=> {
if (it.userId === item.id){
$scope.titleList.push({title: it.title , id: it.userId});
}
});
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="app.js"></script>
<head>
<title>JsonPlaceHolder</title>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.name }}
<button ng-click="getResult(x)">Click</button>
</li>
</ul>
<h2>Results</h2>
<ul>
<li ng-repeat="item in titleList">
{{ item.title }}
</li>
</ul>
</div>
</body>
</html>
Here is my code, Actually when I click on function but not showing alert and not getting error in console. So please tell me how to do.
HTML Code
<li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
</li>
app.js
app.controller('myController', function($scope){
$scope.homepage = function(){
alert('hi');
}});
There can be two reasons
1- Not using ng-app directive in the root element of your application.
2- You have not defined ng-controller properly.
Please follow following working code.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.homepage = function() {
alert('hi');
}
});
</script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<ul>
<li class="has-megamenu" ng-click="homepage()"><a><span >Home</span></a>
</li>
</ul>
</div>
</body>
</html>
First You have to add ng-app = "app"
Second You have to add ng-controller = "myController"
Final
Please check the updated code:
var app = angular.module("app", []);
app.controller('myController', function($scope){
$scope.homepage = function(){
alert('hi');
}});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "myController">
<li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
</li>
<div>
</body>
</html>
I have an application where a part of the page is implemented in angular js. I have a requirement where I have to reload the angular js template coming from the server, based on some user action. I have simulated the exact situation with a dummy code,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript">
var angApp = angular.module("app", []);
angApp.controller("mainCtrl", function($scope){
$scope.p1 = "Hello1";
$scope.p2 = "Hello2";
})
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
function add(){
var tpl = "<div>{{p1}}</div><div>{{p2}}</div>";
$("#container").html("");
$("#container").html(tpl);
angular.element(document).injector().invoke(function($compile){
var obj=$('#angApp');
var scope = angular.element($("#angApp")).scope();
$compile(obj.contents())(scope);
scope.$digest();
});
var angControllerScope = angular.element($("#angApp")).scope();
angControllerScope.$apply(function() {
angControllerScope.p1 = "New Hello";
});
}
</script>
<body>
<button type="button" onclick="add()">Add</button>
<div id="angApp" ng-controller="mainCtrl">
<div id="container">
<div>{{p1}}</div>
<div>{{p2}}</div>
</div>
</div>
</body>
On click of Add button how to get the value as "Hello" again.
Thanks.
Sorry if i have misunderstood what you mean but this is what i think you are trying to achieve...
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.p1 = 'Hello';
$scope.add = function() {
$scope.p1 = 'New Hello'
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="mainController">
<button type="button" ng-click="add()">Add</button>
{{p1}}
</div>
</body>
</html>
Found the solution. I had to recompile the template so that the binding with controller again works fine. Below link was useful.
https://gist.github.com/umidjons/1fb8ae674df4c71f85cf
I have updated the initial code with the working version.
Im new to angular and js
please help me getting json key and bind to ng-model
Following is my code
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-model="table.macid"></li>
</ul>
and my js is
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.table={}
$http.get("test.json")
.success(function(response) {
$scope.names = response
$scope.table.macid= Object.keys($scope.names.day.weekday.Monday.mac_id)
console.log($scope.table)
});
});
this is my plunker link http://plnkr.co/edit/6CoOAp0X8FZw1JODXSHT?p=preview
Any help is appreciated, Thanks in advance
You are confusing ng-model with ng-bind:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-bind="table.macid"></li>
</ul>
See updated plunker
In case you need to iterate over the collection, use ng-repeat. See zszep answer for that.
You can dump it out on your html like this:
<li ng-model="table.macid"></li>{{table.macid}}
It should work, it did for me. You may think you see it because the tag is in an < li > element. What are you expecting that to do?
Use ng-repeat in the li tag like this plunker:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="macid in table.macid">{{macid}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.table={}
$http.get("test.json")
.success(function(response) {
$scope.names = response
$scope.table.macid= Object.keys($scope.names.day.weekday.Monday.mac_id)
});console.log($scope.table)
});
</script>
</body>
</html>
I have a list of objects that I use to build an unordered list with ng-repeat. After a new item is added I would like that item to blink or have some effect to draw the users attention to it. This wouldn't be too difficult with jQuery but I'm trying to do it with only AngularJS
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="MainCtrl">
<input type="text" ng-model="formData.itemText" />
<button ng-click="addItem()">Add</button>
<ul>
<li ng-repeat="item in items">{{item.itemText}}</li>
</ul>
</div>
</body>
</html>
script.js
app = angular.module("app", ["ngAnimate"])
app.controller("MainCtrl", function($scope){
$scope.items = []
$scope.formData = {}
$scope.addItem = function(){
$scope.items.push($scope.formData)
$scope.formData = {}
}
})
plnkr
http://plnkr.co/edit/kqOLpxy2HjPhxnjXHu2L?p=preview
The documentation explains how you can achieve it in different ways.
Simple example:
.highlight {
transition: all linear 300ms;
}
.highlight.ng-enter {
opacity: 0;
color: firebrick;
}
.highlight.ng-enter.ng-enter-active {
opacity: 1;
}
And:
<li ng-repeat="item in items" class="highlight">
Demo: http://plnkr.co/edit/vI0U8aopxoc4c4Bfx2Rh?p=preview