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().
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>
I have a controller like this:
controller('BreadCrumbs', ['$scope','crumble','$rootScope', function ($scope,crumble,$rootScope) {
function init (){
$scope.ui={};
$scope.ui.mdBreadCrumbs=[{"path":"path1","label":"label1"}];
$rootScope.oldScope=$scope;
}
$scope.setBreadCrumbs=function() {
$scope.ui.mdBreadCrumbs=crumble.trail;
}
init();
}]);
and in HTML,
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
{{ui.mdBreadCrumbs}} is showing some like [{"path":"path1","label":"label1"}].
But in ng-repeat, it is not iterating.
Using $scope.setBreadCrumbs I put some more values, but still ngRepeat not working.
Anyone have any idea why it is not working?
Change
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
to
<ol id="breadCrumbList" ng-controller="BreadCrumbs">
DEMO
var app = angular.module('app', []);
app.controller('BreadCrumbs', ['$scope', function($scope) {
$scope.ui = {};
$scope.ui.mdBreadCrumbs = [{
"path": "path1",
"label": "label1"
}];
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="app" ng-controller="BreadCrumbs">
<ol id="breadCrumbList">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
<script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
<script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>
You have to change something in your HTML and your HTML should be like this:
<div ng-app>
<div ng-controller="BreadCrumbs">
<div ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</div>
</div>
</div>
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
pls, help me with next question
I try to implement conditional classes on div blocks using ng-class but have encountered next problem - "it is not working". Example seems to be very simple, I even do not know how else it can be described.
But one more idea - controller does not working instead of ng-class.....i do not know.
Here you can see my code pls, probably you will find smth wrong or give me an advice.
http://plnkr.co/edit/Zm0g4QfkqzTD3h4FWfcp?p=preview
demoApp = angular.module('demoApp',[]);
var controllers = {};
controllers.testCntr = function ($scope)
{
$scope.setClass = function()
{
alert('works');
return True;
}
};
HTML
<!doctype html>
<html ng-app="demoApp">
<head>
<title></title>
<style>
.red
{
color:red;
}
</style>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
</head>
<body>
<div ng-controller="testCntr">
<span ng-class="{red: $scope.setClass()}">Test color</span>
<div>{{$scope.setClass()}}</div>
</div>
</body>
</html>
Thanks for your amendments.
Several problems here.
You can only add one controller at a time with .controller()
In your template, $scope is already the context, so don't include it in the HTML
True should be true
You are missing an ng-app directive
angular.js is not included properly
Your scripts.js is not included
Here's a working version of your Plunkr with the changes above: http://plnkr.co/edit/ybDScjDrrIkH8tBNfIg1?p=preview
When you call a function which is in the scope from the view, just call it like that :
<body ng-app="app">
<div ng-controller="Ctrl">
<span ng-class="{'red': setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
</body>
Here the Working Plunkr
You should create an app.js services.js and controllers.js
Your controller should be moved to the controllers.js and look a little something like this.
demoApp.controller('testCntr',function ($scope){
$scope.setClass = (function(){
alert('works');
return True;
})
});
To add the controller to your app you should do this
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function() {
alert('works');
return True;
}
})
Working Plunkr: http://plnkr.co/edit/LPY94jPJdIJX4pr9K5FY?p=preview
Working Demo:
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function() {
alert('works');
return 33;
return True;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" <div="" ng-controller="testCntr">
<span ng-class="{red: $scope.setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
your script.js file should be
var app = angular.module('demoApp',[]);
app.controller('testCntr', ['$scope', function($scope) {
$scope.setClass = function() {
return true;
};
}
]);
and html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<style>
.red {
color:red;
}
</style>
</head>
<body ng-controller="testCntr">
<span ng-class="{red: setClass()}">Test color</span>
</body>
</html>
It may solve your problem
Plunker link: http://plnkr.co/edit/Ftx3M0aG9G8cJtyrn5wj?p=preview