I am trying to create a shopping list in Angular - and I cannot get my ng-repeat to work. {{food}} is all that will show up when I am trying to add something to my list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List Angular</title>
</head>
<body ng-app="myModule" ng-controller="myController">
<div ng-controller="myController">
<ul>
<li ng-repeat="item in foods">{{ item.name }}</li>
<li> {{foods}}</li>
</ul>
<input type="text" placeholder="Item" ng-model=""></input>
<input type="text" placeholder="Item Name" ng-model=""></input>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
var app = angular.module('myModule', []);
app.controller('myController', function($scope) {
$scope.foods = [
{name: 'Kale', cost: $2.00},
{name: 'Tofu', cost: $3.00},
{name: 'Spinach', cost: $6.00},
{name: 'Onion', cost: $1.00}
];
});
In your JavaScript code, you're missing quotes to represent cost as a string. Try this:
$scope.foods = [
{name: 'Kale', cost: '$2.00'},
{name: 'Tofu', cost: '$3.00'},
{name: 'Spinach', cost: '$6.00'},
{name: 'Onion', cost: '$1.00'}
];
Related
I have a ng-repeat iterates through an array and loads my select options, and one of the options is an empty string, but if i click in on the values the empty option disapears, im not sure why
this is my select
<select
class="form-control input-sm"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-readonly="itemForm.produtosempesobrutodefinido"
ng-required="!itemForm.produtosempesobrutodefinido">
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}" ng-selected="itemForm.grossweightmeasurementunitcode == unidadepeso.commoncode">{{unidadepeso.sigla}}</option>
</select>
i did a $scope.unidadespeso.push = ' '; to achieve the empty value, any ideas?
Add empty item to array.
Following example might help you.
Please comment if you have any doubts.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("myapp", []).controller('MainCtrl', ['$scope', function($scope) {
$scope.selectedItem = { name: 'two', id: 27 };
$scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];
var emptyItem = {name: '', id: '' };
$scope.items.unshift(emptyItem);
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</body>
</html>
Here is simple HTML with Angular js controller
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
}
</script>
</body>
</html>
Here result is not displayed. Error in debugger The controller with the name 'SimpleController' is not registered.
What is wrong here?
It is because you need to wrap the entire thing into a module as below
HTML
<!DOCTYPE html>
<html ng-app="sampleMod">
<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.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
</body>
</html>
Javascript Controller
var app = angular.module('sampleMod', []);
app.controller('SimpleController', function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
LIVE DEMO
As #charlietfl has already given you the point that you need to register angular module first.
See an updated example here
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="SimpleController" >
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script>
angular.module("myapp", [])
.controller("SimpleController", function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
</script>
</body>
</html>
This code registers a controller function named "SimpleController" in the angular module named "myapp".
You cannot bind a controller to an angular application as what you did. You need to create an app module and add that you your code. Only inside that app you can specify your controller. I have corrected the code here.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body ng-app="TestApp">
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("TestApp", []);
angular.module("TestApp").controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'John Smith', city: 'Pheonix' },
{ name: 'Alan David', city: 'England' },
{ name: 'John Hello', city: 'Arizona' },
{ name: 'John Fosay', city: 'Lester' }];
})
</script>
</body>
</html>
As you are using angular version 1.4.8 you can't use global functions as controllers without registering them as part of the module as already suggested by charlietfl to you in the comment.
working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('SimpleController',function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
<li ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('app', []);
app.controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
}
</script>
</body>
</html>
I have been using AngularJS for some time now and this particular code block is not difficult by any means, but it's not working and there must be something extremely simple that I am missing here:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
As of now, this code produces a blank page. There should be an unordered list with four records and for example, typing 'Bob' in the input box should filter the records down to the only one that contains the name 'Bob'.
This demo was already working when the AngularJS code was inline and there was no controller. I had used ngInit in order to supply the customer array. When I attempted to place the customers in their own controller, I started receive a blank page.
I'm sure I just need a second pair of eyes to look over this very simple example.
Thanks for any help you may be able to provide.
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
angular.module('app', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
Multiple things you could change in the demo.
You should create a new angular module
var module = angular.module(name, [dependencies])
That module should be bootstrapped using ng-app
ng-app="nameOfApp"
Controller should be added to the defined module
module.controller('SimpleController', SimpleController);
EDIT: Same outcome without specifying a module
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
I have been trying to display the json data in the ng-grid since 3 hrs but could not do it.I have followed as per the instructions given in the Getting started guide of ng -grid.But could not display the data in the grid.
In my UserEdit.aspx page my HTML code is as follows:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UserEdit.aspx.cs" Inherits="SampleWebApp.UserEdit" %>
<!DOCTYPE html>
<html >
<head runat="server">
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/ng-grid-2.0.14.min.js"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/Control.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" href="/Styles/ng-grid.min.css" />
<link rel="Stylesheet" type="text/css" href="/Styles/Style.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server" novalidate>
<div ng-app="myApp">
<table style="width: 100%; height: 100%">
<tr style="text-align: center; vertical-align: middle;width:100%">
<td style="width:50%;text-align:left">
First Name:
<input type="text" name="firstname" ng-model="FirstName"/>
</td>
<td style="width:50%;text-align:left">
Last Name:
<input type="text" name="lastname" ng-model="LastName"/>
</td>
</tr>
</table>
</div>
<div ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</form>
</body>
</html>
In my Control.js file for the module i have injected the dependency of ngGrid and in my controller MyCtrl I initialize gridoptions variable.My js code is as follows
In my Control.js it is as follows:
var app = angular.module("myApp", ["ngGrid"]);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34}];
$scope.gridOptions = {
data:'myData'
};
$scope.$apply();
});
FYI ,There are no errors that appear in console.And when i view the example given in http://angular-ui.github.io/ui-grid/ , and if i view the code in the plunker the same thing happens(i.e I cannot see any grid ).
Appreciate any Help!!
You are using MyCtrl outside of ng-app
It should be inside of it's module.
try like this
<div ng-app="myApp">
<div ng-controller="MyCtrl">
</div>
</div>
N:B : you don't need $scope.$apply(); .
index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<header>
<h1>DOE</h1>
</header>
<div id="selectSchoolText">
Please select your school.
</div>
<div ng-controller="middleController">
<select class="selectpicker" ng-repeat="school in middleSchools">
<option>{{ school.name }}</option>
</select>
</div>
<script src="lib/jquery/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script src="lib/angular/dashboardApp/modulesApp.js"></script>
<!--<script src="lib/angular/dashboardApp/elementaryController.js"></script>
<script src="lib/angular/dashboardApp/middleController.js"></script>
<!--<script src="lib/angular/dashboardApp/highController.js"></script>
<script src="lib/angular/dashboardApp/otherController.js"></script>-->
moduleApp.js
var app = angular.module('selectApp', []);
app.controller('middleCtrl', function($scope) {
$scope.middleSchools = [
{name: 'Kaimuki Middle'},
{name: 'Kamakahelei Middle'},
{name: 'Kapolei Middle'},
{name: 'Kea\'au Middle'},
{name: 'Kealakehe Intermediate'},
{name: 'Moloka\'i Middle'},
{name: 'Nanakuli High & Intermediate'},
{name: 'Niu Valley Middle'},
{name: 'Washington Middle'}
];
});
I keep receiving the error message "Argument 'middleController' is not a function, got undefined." ...not quite sure what I'm doing wrong. Any suggestions?
<div ng-controller="middleController">
You called it middleCtrl
app.controller('middleCtrl', function($scope) {
your name of controller is not correct its 'middleCtrl' while in view you have used middleController
change it to
app.controller('middleController', function($scope) {
...
});
There are two problems:
First, you are using a wrong name of the controller in your view <div ng-controller="middleController"> instead of <div ng-controller="middleCtrl">. And second you have to define ng-app="selectApp" into your html or body tag or somewhere in your HTML code.