I'm attempting to establish a basic Angular app with a module, controller, and view. I'm struggling to get angular to interpret the content within "{{}}".
I'm running Browserify which is pushing everything to "./js/bundle.js".
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>
<body>
<h1>Show Those Names</h1>
<ul ng-controller="namesController as namesCtrl">
<li ng-repeat="name in namesCtrl">{{name.names}}</li>
</ul>
</body>
</html>
app.js
"use strict";
var app = angular.module('showNames', []);
app.controller('namesController', ['$scope', function($scope){
$scope.names = ["jeff", "jim", "jay", "Please show up"];
}]);
My browser only renders {{name.names}}.
Any idea what's going on here, what I'm missing, or how I can improve my approach?
Thanks!
The problem is that in your ng-repeat you are trying to get names form controller, you should use your model which is part of your controller ie: "name in names" not "name in namesCtrl".
"use strict";
var app = angular.module('showNames', []);
app.controller('namesController', ['$scope', function($scope){
$scope.names = ["jeff", "jim", "jay", "Please show up"];
}]);
<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title> Help </title>
</head>
<body>
<h1>Show Those Names</h1>
<ul ng-controller="namesController as namesCtrl">
<li ng-repeat="name in names">{{name}}</li>
</ul>
</body>
</html>
Wrong way to work with ng-repeat.
<li ng-repeat="name in names">{{ name }}</li>
Your code is a mess.
Your controller is referenced as namesCtrl in your template yet you assign names to $scope. Pick one approach and stick to it
You're repeating over namesCtrl?
Your array entries are strings only, they have no name property
Use $scope...
<ul ng-controller="namesController">
<li ng-repeat="name in names track by $index">{{name}}</li>
</ul>
or use "controller as"
app.controller('namesController', function() {
this.names = ["jeff", "jim", "jay", "Please show up"];
});
and
<ul ng-controller="namesController as namesCtrl">
<li ng-repeat="name in namesCtrl.names track by $index">{{name}}</li>
</ul>
Changed your code. There are multiple mistakes. try this
<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>
<body>
<div ng-controller="namesController as namesCtrl">
<h1>Show Those Names</h1>
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
</body>
</html>
Your app.js is okay. I am hoping it is being pushed into bundle.js
Related
Just defined an app 'Demo' in AngularJS
'use strict';
var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
$scope.obj={language_selected : {'name':'Choose a language'}};
$scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];
});
Now defined an HTML page correspondingly
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="select.css">
</head>
<body ng-controller="DemoCtrl">
<div class="select_list" ng-class='{active:active}' ng-click="active=!active">
<span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">{{obj.language_selected.name}}</span>
<ul class="options">
<li class="select_list_option" ng-repeat="language in language_list" ng-click="obj.language_selected=language" ng-style="{'background-image':'url('+language.url+')'}">{{language.name}}</li>
</ul>
</div>
</body>
</html>
EDIT: Checked the appName -> 'demo' & ng-app is demo & controller is DemoCtrl & ng-controller is DemoCtrl. It is defined appropriately.
The plunker now gives out an empty page.
Am I missing anything here ? Plunker link here: http://next.plnkr.co/edit/nXsUgM7nEsfg7jXh
You forgot to load you js code, please add
<script src="demo.js"></script>
Here is plunker http://next.plnkr.co/edit/g4yKhngP1TyJ8jLr
You are missing to add the reference to demo.js in the index.html. Add the references as follows.
<script src="demo.js"></script>
PLUNKER DEMO
Seems like you forgot to load your js code
<script src="demo.js"></script>
demo
I'm new to AngularJS and have recently begun experimenting with creating tables and the ng-repeat functionality. I had an idea to write a JS object where every object has a respective name and a HTML button element associated with it. I'm able to create the list of objects without a problem, but the issue I'm running into is how to display the information; specifically, how to display each object's button element.
Below is the code I have for displaying each object in a list:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">
{{x.name + ', ' + x.button}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.names = [{name:'Mike',button:document.createElement('button')}]
});
</script>
</body>
</html>
Currently my results look like:
And what I would like to see is:
You should create the button with the html tag. Like this:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">
{{x.name}}
<button ng-click="...">{{x.button}}</button>
</li>
</ul>
</div>
Its the standard way to do it with AngularJS and will give you more freedom to use ng directives and all.
No idea what you want to create an element. Just use text for the property value and add appropriate markup in the template.
Use components or directives for any dom methods. They don't belong in controllers
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.names = [{name:'Mike',button:'Button name'}]
});
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">
{{x.name}}<button>{{x.button}}</button>
</li>
</ul>
</div>
<script>
</script>
</body>
</html>
Okay so I'm following an AngularJS online beginner course, and wrote my first app :
HTML :
<html ng-app>
<head>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Hello {{ name }}!</h1>
</div>
</body>
</html>
app.js :
var myApp = angular.module("myApp",[]);
myApp.controller('mainController',['$scope',function($scope){
$scope.name = 'Elliot';
}]);
I don't get the desired outcome from this small app, I only get "Hello {{ name }}!".
What am I doing wrong here?
Change your html tag too:
<html ng-app="myApp">
I have a problem to bind the ng-click directive with a method inside my controller. I have tried to put curly brackets inside ng-click, but with a syntax error. The same behavior occurs if I put ng-click="{{action.method}}".
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.11" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<ul ng-repeat="action in actions">
<li ng-click={{action.method}}>{{action.name}}</li>
</ul>
</body>
</html>
controller.js
var app = angular.module('app',[])
app.controller('Controller',['$scope',function ($scope)
{
$scope.actions = [
{
name : 'add Folder',
method : 'addFolder()'
}
]
$scope.addFolder = function(){
alert('addFolder')
}
}])
Any suggestions?
You should use:
<ul>
<li ng-repeat="action in actions" ng-click="action.method()">{{action.name}}</li>
</ul>
instead.
Here is a demo: http://jsbin.com/cuye/2/edit
Note that ng-click accepts expression, not only function so you need to call it: action.method().
My module isn't loading, and I can't figure out why. Could someone help me to find out what I am doing wrong?
The following is my HTML in a file named index.html:
<html ng-app="demoApp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<script type="text/javascript" src="_Script.js"></script>
<script src="angular.min.js"></script>
</head>
<body>
<!-- Get name out of array with controller using a module-->
<h3>Get names out of an array with controller using a module:</h3>
<div class ="container" ng-controller="SimpleController">
<input type="text" ng-model="search" /> {{ search }}
<ul>
<li ng-repeat="naam in namen | filter:search" >{{ naam }}</li>
</ul>
</div>
</body>
</html>
And this is the Javascript in a file named _Script.js:
var demoApp = angular.module('demoApp', []);
function SimpleController($scope) {
$scope.namen = [
'John',
'Will',
'Alex'
];
}
demoApp.controller('SimpleController', SimpleController);
I've looked for everything, so maybe it is simple. But I can't find it and got stuck with it.
Regards,
You're currently loading your _script.js first, and angular JS second. If you reorder them your script should work: