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>
Related
I have a situation somewhat like this below code. I have a delete button on view cart page when it is pressed an API is called to delete the product and I just hide the product div tag to avoid page reload initially. How to hide multiple products one by one
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(){
//WHAT SHOULD GO HERE
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide()" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
You can have following in your HTML:
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)"
ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}</h5>
Now, your hide() function would look like this,
$scope.hide = function(index){
$scope['hide'+index] = true
}
That should hide numbers on click.
Here's working example!
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(index){
$scope['hide'+index] = true
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
if you want to hide the product div tag to avoid page reload initially
just get type button without type="submit" ( inside <form></form> )
<button type="submit" > to >>> <button ng-click="hide()">
Update your COntroller like that :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=[0,1,2,3,4,5,6]
$scope.hide = function(x){
//WHAT SHOULD GO HERE
$scope.list.splice(x, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in list">{{x}}</h5>
</div>
</body>
</html>
ng-hide is just css(display:none) way hide element. ng-if is add/remove DOM element. (we can see if u hide element, ng-if we can't see).
You try remove. Just see the example.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6];
$scope.hide = function(index){
// in api call success function
$scope.data.splice(index, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in data">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
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
I have the following code usage of ng-repeat, I am getting 3 blank <li/> but not data within of 3 populations. Can someone help why?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
I think it should be:
<li ng-repeat="x in Cities">{{x.population}}</li>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{x.population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
You just forgot (x.population) otherwise it was OK.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div style="color:{{color}}">Testing</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.color = "#996600";
});
</script>
</body>
Color properties not working in IE, but chrome and firefox are working
Instead of using expression using {{}}, use ng-style directive.
<div ng-style="{color: color}">Testing</div>
Angular has issues when using style. Refer
This is the updated code:
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="{color:color}">Testing</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.color = "#996600";
});
</script>
As you are using angularJs you need to define ng-style
Try using the ng-style directive:
https://docs.angularjs.org/api/ng/directive/ngStyle
style is HTML attribute where as ng-style in Angular Attribute.
So that Please use below notation
<div ng-style="{color:color}">Testing</div>
if want angular Notification
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="color:{{color}}">Testing</div>
</div>
</body>
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().