I am picking up checkbox Data from Controller file, but it is not rendering properly. Following is my html:
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<input type="checkbox" id="{{x.id}}" >{{x.name}}<br/>
</tr>
</table>
<button>Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
});
</script>
</body>
</html>
Expectation:
3 rows of input checkboxes with names adjescent to them
Result:
There are no JS Errors. Can someone help me out what is wrong in this?
Just add a "td" tag : JSFIDDLE
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<td>
<input type="checkbox" id="{{x.id}}" >{{x.name}}<br/>
</td>
</tr>
</table>
<button>Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
});
</script>
</body>
</html>
Related
Many times answered, but I still don't understand what's wrong in my code. I'm new to JavaScript and Angular, so please help why I'm getting this error.
Here's my HTML and JavaScript codes. I'm trying to make an array from user input values, show them in table and then insert a button to calculate the cheapest and the most expensive items of the list. Right now I'm stuck in getting the user inputs in the array because of the angular error.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [{"syotettyTuote": "syotettyHinta"}];
}]);
var syotettyTuote = $scope.document.getElementById("tuote");
var syotettyHinta = $scope.document.getElementById("hinta");
function lisaaListaanTuote(){
$scope.listaArr.push($scope.syotettyTuote.value);
}
function lisaaListaanHinta(){
$scope.listaArr.push($scope.syotettyHinta.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="syotettyTuote and syotettyHinta in listaArr">
<td>{{ $index + 1 }}</td>
<td>{{ x.syotettyTuote }}</td>
<td>{{ x.syotettyHinta }}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" ng-model="syotettyTuote" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
<input id="hinta" type="parseInt" ng-model="syotettyHinta" placeholder="Hinta" />
<button ng-click="lisaaListaanHinta()">Laita listaan</button>
</fieldset>
</form>
<h2>Listasi kallein ja halvin tuote</h2>
<button id="laske" onclick="laske()" placeholder="Laske kallein ja halvin tuote">Laske kallein ja halvin</button>
<textarea id="kallein" placeholder="Kallein" ></textarea>
<textarea id="halvin" placeholder="Halvin"></textarea>
</body>
</html>
You've used $scope object outside the Controller and the code language is a bit difficult to understand.
However, I've added the simple example from your code.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [];
$scope.lisaaListaanTuote = function(){
var val = angular.element(document.querySelector("#tuote")).val();
console.log(val);
$scope.listaArr.push(val);
}
}]);
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="item in listaArr">
<td>{{item}}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
</fieldset>
</form>
</body>
</html>
I need to do something like this
<div ng-repeat "data in datas">
<iframe ng-src="myurl.html?cat={{data.id}}">
By the way it's just a local file no cross domain problem.
I know how to do with fixed url using $sce but don't know how with variable url which varies with ng-repeat
Your ng-repeat should be,
<div ng-repeat="data in datas">
DEMO
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.datas = [{ id: "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg" },
{ id: "https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg" }];
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<div data-ng-repeat="data in datas">
<a href='#'><img ng-src="myurl.html?cat={{data.id}}" /></a>
</div>
</div>
</body>
</html>
I am using angularjs bootstrap popover inside a table.
The table is populated using ng-repeat and if the popover is open and i get new data to the table there is a flicker to the popover.
Here is a working example
Pknkr
Any thought on how can i prevent the flicker ?
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<br/>
<br/>
<table>
<tr ng-repeat="item in list">
<td>
<button uib-popover-template="dynamicPopover.templateUrl"
popover-is-open="aux.openPopOverId==item.id"
ng-click="aux.openPopOverId=item.id" popover-placement="right" type="button" class="btn btn-link">
Popover
</button>
</td>
</tr>
</table>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
</div>
</body>
</html>
And the js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope,$interval, $sce) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.list = [{'id':1},{'id':2},{'id':3}];
$scope.aux = {'openPopOverId':2};
$scope.updateList = function(){
$scope.list = [{'id':1},{'id':2},{'id':3}];
}
$interval($scope.updateList,500,0);
});
I thought this could be help you please read here in detail..
ng-repeat not working with table,in the output only header part displayed?
As i think the binding i did is perfectly fine, but something is there which i am missing?
Can anyone help me out where i am doing wrong?
JAVA SCRIPT:
var myapp=angular.module("MyApp",[]);
var controller=function($scope)
{
var technology1=[
{Name: "C#",Likes: 0,Dislikes: 0},
{Name: "JAVA",Likes:0,Dislikes:0},
{Name: "Python",Likes:0,Dislikes:0}
];
$scope.technology=technology1;
$scope.incrementLikes=finction(technology)
{
technology.Likes++;
}
$scope.discrementLikes=function(technology)
{
technology.Dislikes++;
}
}
myapp.controller('MyController',controller);
<html ng-app="MyApp">
<head>
<title></title>
<script src="angular.js"></script>
<script src="Day2.js"></script>
</head>
<Body ng-controller="MyController">
<div >
<table border='2'>
<thead>
<tr>
<th>Name Of Technology</th>
<th>Likes</th>
<th>Dislikes</th>
<th>Likes/Dislikes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tech in technology">
<td>{{tech.Name}}</td>
<td>{{tech.Likes}}</td>
<td>{{tech.Dislikes}}</td>
<td>
<input type="button" value="Like" ng-click="incrementLikes(tech)">
<input type="button" value="Dislikes" ng-click="decrementLikes(tech)">
</td>
</tr>
</tbody>
</table>
</div>
</Body>
</html>
Replace this line
$scope.incrementLikes=finction(technology)
by
$scope.incrementLikes=function(technology)
Your code has a typo in your myController controller. Change finction to function.
As Pankaj Parkar pointed out you need to correct the "finction" typo as well as to reference the $scope.technology.Likes and $scope.technology.dislikes when you are incrementing their values.
So update these lines:
$scope.incrementLikes=finction(technology)
{
technology.Likes++;
}
$scope.discrementLikes=function(technology)
{
technology.Dislikes++;
}
To this
$scope.incrementLikes=function(technology)
{
$scope.technology.Likes++;
}
$scope.discrementLikes=function(technology)
{
$scope.technology.Dislikes++;
}
Here's the fully corrected code. I can't comment on the answer from #pzelenovic but do NOT add "$scope.technology.Likes++;" or "$scope.technology.Likes++;" to your increment/decrement functions. Those are fine the way they are because you're updating the likes/dislikes property on the "tech" object you passed in from the click function.
var myapp=angular.module("MyApp",[]);
var controller=function($scope)
{
var technology1=[
{Name: "C#",Likes: 0,Dislikes: 0},
{Name: "JAVA",Likes:0,Dislikes:0},
{Name: "Python",Likes:0,Dislikes:0}
];
$scope.technology=technology1;
$scope.incrementLikes=function(technology)
{
technology.Likes++;
}
$scope.decrementLikes=function(technology)
{
technology.Dislikes++;
}
}
myapp.controller('MyController',controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyApp">
<head>
<title></title>
<script src="angular.js"></script>
<script src="Day2.js"></script>
</head>
<Body ng-controller="MyController">
<div >
<table border='2'>
<thead>
<tr>
<th>Name Of Technology</th>
<th>Likes</th>
<th>Dislikes</th>
<th>Likes/Dislikes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tech in technology">
<td>{{tech.Name}}</td>
<td>{{tech.Likes}}</td>
<td>{{tech.Dislikes}}</td>
<td>
<input type="button" value="Like" ng-click="incrementLikes(tech)">
<input type="button" value="Dislikes" ng-click="decrementLikes(tech)">
</td>
</tr>
</tbody>
</table>
</div>
</Body>
</html>
I'm trying to load dynamic content with AngularJS but does not work.
I have a system with legacy pages with dynamic load using JQuery but now I am developing some new features using AngularJS and have same trouble in dynamic load.
The follow code show exact my problem (https://jsfiddle.net/alvarof/w7ynuro8/):
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.75/jsrender.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="static">
<div ng-controller="StaticCtrl">
<table>
<tr>
<th>Static Table</th>
</tr>
<tr ng-repeat="item in items">
<td>{[{item}]}</td>
</tr>
<tr ng-show="!items.length">
<td>No items!</td>
</tr>
</table>
</div>
</div>
<div id="dynamic">
</div>
<button onclick="loadDynamicContent()">Load dynamic content</button>
</body>
<script id="dynamic_tmpl" type="text/x-jsrender">
<div ng-controller="DynamicCtrl">
<table>
<tr>
<th>Dynamic Table</th>
</tr>
<tr ng-repeat="item in items">
<td>{[{item}]}</td>
</tr>
<tr ng-show="!items.length">
<td>No items!</td>
</tr>
</table>
</div>
</script>
<script>
var loadDynamicContent = function () {
$("#dynamic").html($("#dynamic_tmpl").render());
//FORCE RECOMPILE Angular????
}
var myApp = angular.module('myApp', []);
myApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
myApp.controller('StaticCtrl', function ($scope) {
$scope.items = ['StaticCtrl: element 1', 'StaticCtrl: element 2', 'StaticCtrl: element 3', 'StaticCtrl: element 4'];
});
myApp.controller('DynamicCtrl', function ($scope) {
$scope.items = ['DynamicCtrl: element 1', 'DynamicCtrl: element 2', 'DynamicCtrl: element 3', 'DynamicCtrl: element 4'];
});
</script>
</html>
Anyone had the same problem?
Thank you!
First of all your expression {[{item}]} is not correct check the documentation for angularjs expressions then why did you use ng-template refer template matching in angularjs