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>
Related
I have been trying to consume the webapi service that I built using angularjs. However, the page appears to be blank after running.
App.js
var app = angular.module("productsApp", ["productService"]);
app.controller("productsController", function ($scope, product) {
$scope.products = product.query();
});
Service.js
(function () {
angular.module("productService", ["ngResource"]).
factory("product", function ($resource) {
return $resource('http://localhost:55755/api/products/:id');
});
}());
Html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
</head>
<body ng-app="productsApp">
<div ng-controller="productsController as vm">
<table>
<tr ng-repeat="p in vm.products">
<td>{{ p.productName}}</td>
<td>{{ p.productCode }}</td>
<td>{{ p.releaseDate | date }}</td>
<td>{{ p.price | currency }}</td>
</tr>
</table>
</div>
<script src="Scripts/App.js"></script>
<script src="Scripts/service.js"></script>
</body>
</html>
You are using controllerAs syntax in view but not in controller
Try changing to:
app.controller("productsController", function ( product) {
var vm = this;
vm.products = product.query();
});
When using controllerAs you only need $scope for things like angular events and $watch
I'm doing an simple app-ToDoList with login page.the second page have a controller that update dynamically the content of my ToDoList, unfortunately when I launch my application the controller not update the page...there someone that could advice me what's wrong? maybe I'm missing something..
here the application with the code :
http://plnkr.co/edit/IIYlc1RbEeW8mn9L6YVL?p=preview
This is the page where load the contents.
<html ng-app="toDoApp" ng-controller="toDoController">
<head>
<title>Tasks App</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="ToDocontroller.js" type="text/javascript"></script>
</head>
<body>
<h1>My To-do List</h1>
<h2>Tasks</h2>
<table>
<tr><td>
<h3>Active ({{ tasks.length }})</h3>
<span ng-hide="tasks.length">You have no active tasks!</span>
<div ng-repeat="task in tasks">
<input type="checkbox" ng-click="transferTo($index, tasks, completed)" /> {{ task }}<br />
</div>
</td><td>
<div ng-show="completed.length">
<h3>Completed ({{ completed.length }})</h3>
<div ng-repeat="task in completed">
<input type="checkbox" ng-click="transferTo($index, completed, tasks)" checked /> <span class="complete">{{ task }}</span><br />
</div>
</div>
</td></tr>
</table>
<h2>Add a Task</h2>
<form ng-submit="addTask()">
<input type="text" placeholder="Description" ng-model="newTaskName" />
<input type="submit" value="Add" />
</form>
</body>
</html>
Here my controller
angular.module('toDoApp', [])
.controller('toDoController', ['$scope', function($scope) { alert('1');
$scope.tasks = ['Do the laundry'];
$scope.completed = [];alert('1');
$scope.newTaskName = '';
alert('2');
$scope.addTask = function() {
var name = $scope.newTaskName;
if (name && $scope.tasks.indexOf(name) == -1
&& $scope.completed.indexOf(name)) {
$scope.tasks.push(name);
$scope.newTaskName = '';
}
};
$scope.transferTo = function(index, start, end) {
end.push(start[index]);
start.splice(index, 1);
}
}]);
tnx in advance
So many mistakes. This is just sample. You should use $route (ng-view or ui-view) for route navigation.. I was updated plnkr.
http://embed.plnkr.co/C1ubxufRQHN4rfGooxeF/
I have angularjs front end code as follows:
function addController($scope, $http) {
$scope.tableNames = [];
$scope.addNewColumn = function(item) {
$scope.tableNames.push({})
}
}
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="addController">
<div class="col-sm-10">
<fieldset ng-repeat="item in tableNames track by $index">
<span> TextBox1:<input type="text" ng-model="item.item1" />
TextBox2:<input type="text" ng-model="item.item2" /></span>
</fieldset>
<button class="btn btn-default" ng-click="addNewColumn()">Add Colname</button>
</div>
<pre>{{tableNames|json}}</pre>
</body>
</html>
So when I enter text in the textbox1 and textbox2 it shows array of below format:
[{
"item1":"textbox1value",
"item2":"textbox2value"
}]
and also when i click addColname button and generate another textbox, values are pushed in different property as follows,it generates:
[{
"item1":"textbox1value",
"item2":"textbox2value"
},
{
"item1":"textbox1value",
"item2":"textbox2value"
}
]
but what actually i need is of structure,
[{
"textbox1value":"textbox2value",
"textbox1value":"textbox2value",
.....
}]
note(:"textboxvalue" are values entered inside textboxes.
somebody help me to get desired output. thanks in advance
This is a working code. I hope this helps :)
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script>
function addController($scope, $http) {
$scope.tableNames = [];
$scope.getData={};
var i=-1;
$scope.addNewColumn = function (item) {
$scope.tableNames.push({})
i++;
}
$scope.addData = function(item){
if(i >= 0){
$scope.newData=[];
$scope.getData[$scope.tableNames[i].item1]=$scope.tableNames[i].item2;
$scope.newData.push($scope.getData);
}
}
}
</script>
</head>
<body ng-controller="addController">
<div class="col-sm-10">
<fieldset ng-repeat="item in tableNames track by $index">
<span> TextBox1:<input type="text" ng-model="item.item1" ng-keyup="addData()"/>
TextBox2:<input type="text" ng-model="item.item2" ng-keyup="addData()"/></span>
</fieldset>
<button class="btn btn-default" ng-click="addNewColumn()">Add Colname</button>
</div>
<pre>{{newData|json}}</pre>
</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..
im using this plunker autocomplete
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
<h3 class="ng-binding">Item Name: {{item.name}}</h3>
<h3 class="ng-binding">Item Id: ({{item.id}})</h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
</body>
</html>
in my project , i face problem when i try to edit i fill the input automaticly so the problem is i just get text and all the object in ng-model
for example in the link above if i copy the world Chicken and paste it in input it will not give me the object it will be just text ,
if i insert the world c and choice the option Chicken i will get in ng-model the object (that contain id and name)
Look at working example,
http://plnkr.co/edit/Z930HmH83KIENuEjWhx3?p=preview
I have change your code a bit and made it angular code rather than java script code.
I hope it will work. I have taken your json in .json file and using $http service made call to that json.
var app = angular.module('myApp', ['ui.bootstrap']);
app.factory('autoComplete',function($http){
return{
load:function(){
$http.get('data.json').success(function (data){
sessionStorage.setItem( 'items', JSON.stringify(data) );
})
}
}
})
app.controller('TypeaheadCtrl',function($scope,$http,autoComplete){
$scope.selected = undefined;
$scope.items = JSON.parse(sessionStorage.getItem('items'));
});
I hope that little modification to this solution would take you to your required solution.
HERE is the working plunker PRESS STOP THEN RUN, BUG IN PLUNKER : http://plnkr.co/edit/QGqDjhzcFVNSHxA2hmHM?p=preview
It should be ng-bind not ng-binding and it shouldn't be class = ng-binding (angular directives are not css classes) it should be Item name: <h3 ng-bind="item.name"></h3>. Here's an example from the angularJS website:
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
and here's your code edited:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
Item name: <h3 ng-bind="item.name"></h3>
Item ID: <h3 ng-bind="item.id"></h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>