Hello everyone I am trying to learn Angular and I want to get data from a Span and append in another span. Please help me out fro there.
My code is here
<div ng-app="" >
<div>
Name: <span ng-init="firstName='Ritu'">Ritu</span>
Address: <span ng-init="address='Uttam Nagar'">Uttam Nagar</span>
City: <span ng-init="city='West Delhi'">West Delhi</span>
State: <span ng-init="state='Delhi'">Delhi</span>
pin: <span ng-init="pin='110045'">110045</span>
<button>Click and Show</button>
</div
And I want to show like that but after click on show button
<p>Name <span ng-bind="firstName"></span></p>
<p>Address <span ng-bind="address"></span></p>
<p>City <span ng-bind="city"></span></p>
<p>State <span ng-bind="state"></span></p>
<p>pin <span ng-bind="pin"></span></p>
</div>
Thanks in advance.
I created a plnkr that does what you would like to do . Check it out http://plnkr.co/edit/8xZik28CECenuPpLgdpq?p=preview
I used ng-show directive which results as css display (block or none) and you may use ng-if if you desire but ng-if has performance impact when used so many times , and you can find alternate ways of this I just wanted to give a quick move .
the html part
<body ng-controller="MainCtrl">
Name: <span ng-init="firstName='Ritu'">Ritu</span>
Address: <span ng-init="address='Uttam Nagar'">Uttam Nagar</span>
City: <span ng-init="city='West Delhi'">West Delhi</span>
State: <span ng-init="state='Delhi'">Delhi</span>
pin: <span ng-init="pin='110045'">110045</span>
<button data-ng-click="show=!show">Click and Show</button>
<div ng-show="show">
<p>Name <span ng-bind="firstName"></span></p>
<p>Address <span ng-bind="address"></span></p>
<p>City <span ng-bind="city"></span></p>
<p>State <span ng-bind="state"></span></p>
<p>pin <span ng-bind="pin"></span></p>
</div>
</body>
the app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.show=false;
});
At first, a lot of used ng-init directive commonly not best practice. Take a look angular's advice.
So that reason, I think initializing value have to be placed in controller.
Check it out this plunker.
ng-init is for having initial data, But it also gets unnecessary logic into the Template
You can do the same Initializing in the Controller like:
app.controller('MainCtrl', function($scope) {
$scope.user = {
firstName: 'Ritu',
address: 'Uttam Nagar',
city: 'West Delhi',
state: 'Delhi',
pin: '110045'
}
$scope.show=false; });
And bind the user object in the view like:
<body ng-controller="MainCtrl">
Name: <span>{{user.firstName}}</span>
Address: <span>{{user.address}}</span>
City: <span>{{user.city}}</span>
State: <span>{{user.state}}</span>
pin: <span>{{user.pin}}</span>
<button data-ng-click="show=!show">Click and Show</button>
<div ng-show="show">
<p>Name <span ng-bind="user.firstName"></span></p>
<p>Address <span ng-bind="user.address"></span></p>
<p>City <span ng-bind="user.city"></span></p>
<p>State <span ng-bind="user.state"></span></p>
<p>pin <span ng-bind="user.pin"></span></p>
</div>
</body>
This simplifies the Code and keeps the Template clean
Here is a plunker
Related
ng-repeat is commented out on chrome inspect
I can't seem to figure out how to get my ng-repeat to work. I can see that the correct information is scoped properly, but when I inspect the HTML in dev tools, the first line below is commented out and the cards don't show up. Any suggestions?
<div ng-repeat="matchedArtist in matchedArtists">
<div class="centerPandora">
<div class="row">
<div class="col-med-12">
<div class="content">
<div class="card">
<div class="firstinfo">
<img src="#" />
<div class="profileinfo">
<h1>{{ matchedArtist.artist }}</h1>
<h3>{{ matchedArtist.date }}</h3>
<h4>{{ matchedArtist.venue }}</h4>
<p class="bio"></p>
<a href="#">
<font color="black">Click for event details</font>
</a>
</div>
</div>
</div>
<div class="badgescard info"><span id="days"></span><span
id="hours"></span><span id="minutes"></span><span id="seconds"></span>
</div>
</div>
</div>
</div>
</div><br /><br /><br /><br />
</div>
'use strict';
var concertList =
angular.module('concertList').controller('ConcertListCtrl',
function($scope){
function hideLogin($scope) {
$scope.advstatus = true;
};
$scope.matchedArtists = matchedArtists
});
UPDATE
Here is a screenshot of the AngularJS scope showing events are being scoped properly
Firstly, you must to be sure that yours controllers works properly and goes inside html template.
Than $scope.matchedArtists - is an Array of objects in yours case
$scope.matchedArtists = [{artist: 'ártist', date: 'date', venue: 'venue '},
{artist: 'ártist2', date: 'date2', venue: 'venue2'}]
Debugging AngularJS Problems
To quickly test the variable on scope:
matchedArtists={{matchedArtists | json}} scope={{$id}}
<div ng-repeat="matchedArtist in matchedArtists">
<div class="centerPandora">
<div class="row">
<div class="col-med-12">
Using the inspection console, click on the element of interest:
>scope=angular.element($0).scope()
>console.dir(scope)
There are several possible reasons the data is not showing:
The template is part of an isolate scope;
The controller is on a sibling element;
The controller was instantiated with controllerAs syntax;
I'm running into a strange issue when executing the .push() method on an angular js collection. In the console I can see the object is added, but I cannot actually see it added to the list.
$scope.discountCodes.push({
discountCodeId: 0,
name: $scope.discountModel.name,
code: $scope.discountModel.code,
codeValue: $scope.discountModel.codeValue,
valueType: $scope.discountModel.valueType,
startDate: $scope.discountModel.startDate,
endDate: $scope.discountModel.endDate,
isActive: "True"
});
I have a simple repeater combined with a template
<div ng-repeat="discount in discountCodes" ng-include="getTemplate(discount)">
</div>
<script type="text/ng-template" id="display">
<div class="row">
<div class="col-md-3">
<span>Name:<br />{{discount.Name}}</span>
</div>
<div class="col-md-2">
<span>Code:<br />{{discount.Code}}</span>
</div>
<div class="col-md-2">
<span>Value:<br />{{discount.CodeValue}}</span>
</div>
<div class="col-md-2">
<span>Active:<br /></span>
<i class="icon-circle green-fill"
ng-show="discount.IsActive">
</i>
<i class="icon-circle red-fill"
ng-show="!discount.IsActive">
</i>
</div>
<div class="col-md-2"><br />
<i class="icon-edit icon-2x"></i>
</div>
</div>
</script>
This is the method:
$scope.discountModel.formSubmit = function (item, event) {
$scope.alertMessageContainerVisible = false;
if ($scope.frmDiscountForm.$valid) {
var dataObject = {
discountCodeId: 0,
name: $scope.discountModel.name,
code: $scope.discountModel.code,
codeValue: $scope.discountModel.codeValue,
valueType: $scope.discountModel.valueType,
startDate: $scope.discountModel.startDate,
endDate: $scope.discountModel.endDate,
isActive: "True"
};
action = "NEW";
$scope.discountCodes.push(dataObject)
});
}
}
Any ideas are helpful, I am new to Angular JS so be easy on me :)
I created a very simple version of this below:
http://plnkr.co/edit/qJDU7uiFleWIOjR5LYFh
It looks like you might be updating the collection outside of the Angular context. If so, you'll need to use $scope.$apply() for Angular to see your changes.
Turned out to be a stupid mistake! I had my controller defined in the body and in the div, so it was in two places. Now everything is working good!
Thanks all, it was good learning experience
What I'am trying to do is convert every user input into a label using angular. I believe that I'am doing the right thing, but is not working. I will appreciate if somebody take a look at this code. Thank you
here is a plunker
<div class="row" ng-controller="tagForm">
<div ng-click="addEntry()">
<div class="col-xs-12 col-sm-12 col-md-10 ">
<input type="text" placeholder="What are your area of expertise" ng-model="newEntry.name" class="form-control border" />
</div>
<div class="col-xs-12 col-md-2 center form-button">
<input type="button" value="Add" class="btn btn-orange btn-add" />
</div>
<div class="col-md-8 col-sm-offset-2" id="up">
<br />
<span class="label label-primary" ng-repeat="entry in entries">{{entry.name}}</span>
</div>
</div>
</div>
app.controller('tagForm', ['$scope', function($scope) {
return $scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
return $scope.newEntry = {};
};
}]);
You have a few things wrong in your Plunk, but here's some stuff to start with:
You need to wire up a click event on your Add button. Right now, its not doing anything when you click it
Bind to an ng-model on the scope just using 'newEntry'. All you're typing is a name so thats all you need to save on the scope.
Loop over entries, printing out just 'entry' instead of 'entry.name'
And your controller should look like this (no need for the returns)
app.controller('tagForm', ['$scope', function($scope) {
$scope.entries = [];
$scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
};
}]);
See this fiddle:
http://jsfiddle.net/smaye81/anrv2qms/1/
Hi I just started learning Angular today and I have some problems when trying to bind an event.Here is what I have done so far.I loaded all my scripts on my html page:
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/angular.js"></script>
<script src="app/modules.js"></script>
<script src="app/Controllers/studentGradesController.js"></script>
I then create a file modules and defined my module:
var angularTestApp = angular.module('AngularTestApp', []);
I then created a controler:
angularTestApp.controller('StudentGradesController', function StudentGradesController($scope) {
$scope.students = [
{
firstName: 'Lorem',
lastName: 'Ipsum',
age: 24,
grade: 5,
votes: 0
},
{
firstName: 'Lorem',
lastName: 'Ipsum',
age: 250,
grade: 21,
votes: 0
}
...
];
$scope.downVote = function(student) {
student--;
};
$scope.upVote = function (student) {
alert("I work");
};
});
I then binded the controller on my html:
<article class="container" ng-controller="StudentGradesController">
<section>
<section ng-repeat="student in students" class="row">
<div class="col-md-1 text-center">
<i class="fa fa-chevron-up pointer" ng-click="upVote"></i>
<span ng-bind="student.votes" class="center-block"></span>
<i class="fa fa-chevron-down pointer" ng-click="downVote"></i>
</div>
<div class="well col-md-11">
<div>
<span ng-bind="student.firstName"></span>
<span ng-bind="student.lastName"></span>
</div>
</div>
</section>
</section>
</article>
When I try to click on the binded items nothing happens.No errors are thrown.Can anyone tell me what I am doing wrong?
Call a function using ng-click instead of just referencing it. Adding the parenthesis will make it a function call:
<i class="fa fa-chevron-up pointer" ng-click="upVote(student)"></i>
That said; the i tag is just puts text in italics and you have no text specified, so there is nothing to click on.
The argument you provide in ng-click is not a function, it's an AngularJS expression. It's like a Javascript expression. You should use ng-click="upVote(student)" to call it.
try ng-click="downVote(student)" and ng-click="upVote(student)"
I have comment feature for every article which is getting populated with ngrepeat.
New comment added should be updated to comments.
<div ng-repeat="Article in Articles">
<div class="Description">
{{Article.Description}}
</div>
<div class="commentbox">
<textarea placeholder="Share your View" ng-model="Article{{Article.Articleid}}" ></textarea>
<div class="post">
<a href="javascript: void(0)" ng-Click="AddComment({{Article.Articleid}});" > Article </a>
</div>
</div>
</div>
and the Js function to add the comment is
$scope.AddComment = function(ArticleID){
$scope.Comments.push({
ArticleID: ArticleID,
**ReviewText: $scope.Comment130, //how to acess the model of received ArticleID**
DateAdded:new Date()
});
my question is how to set the dynamic value to ng-model and access it in the jsfunction.
Thanks
i think your binding is somehow messed up. Something like this should do it. Watch the console for the received objects and you can start doing stuff with them.
http://plnkr.co/edit/ugtbO2
html
<div ng-repeat="a in articles" ng-model="article">
<div class="description">{{a.description}} (id: {{a.id}})</div>
<div class="commentbox">
<textarea placeholder="Share your View" ng-model="a.review"></textarea>
<div class="post">
<button ng-click="addComment(a)" > Submit </button>
</div>
</div>
</div>
js
$scope.articles = [
{id: '1',description: 'sdfsdf', review:''},
{id: '2',description: 'asa334', review:''},
{id: '3',description: 'dfsdfw3r', review: ''},
{id: '4',description: 'sdfsdf', review: ''}
];
$scope.addComment = function (article) {
$scope.comments.push({
ArticleID: article.id,
ReviewText: article.review,
DateAdded : new Date()
});
console.log($scope.comments);
};