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
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;
In my view I have a list of icons that when clicked, should call a function from the controller.
View
<div ng-controller="EditorController" class="main-div">
<aside>
<div ng-repeat="icon in EditorIcons">
<img ng-click="changeme()"
data-ng-src="{{icon.source}}"
alt="{{icon.name}}"/>
</div>
</aside>
</div>
Controller
app.controller('EditorController', function($scope) {
$scope.EditorIcons = [ ... ];
$scope.changeme = function() {
console.log("changing");
}
}
I've seen this question asked before, yet I still wasn't able to find out the problem here. What am I doing wrong?
UPDATE
I've found the problem. I had a z-index of -1 on the aside element
Assuming that EditorIcons is a collection in your controller, and changeme is a method inside of your controller, the you need t remove the $parent:
<div ng-repeat="icon in EditorIcons">
<img ng-click="changeme()"
ng-src="{{icon.source}}" alt="{{icon.name}}" />
</div>
Secondry you werte missing quotes " in your alt definition
Ok I just tried to make a fiddle and it works fine:
https://jsfiddle.net/pegla/8807dvrr/2/
<div ng-app>
<div ng-controller="SomeCtrl">
<aside>
<div ng-repeat="icon in EditorIcons">
<img ng-click="changeme()" data-ng-src="{{icon.source}}" alt="{{icon.name}}" />
</div>
</aside>
</div>
</div>
function SomeCtrl($scope) {
$scope.EditorIcons = [{
source: '',
name: 'icon-1'
}, {
source: '',
name: 'icon-2'
}];
$scope.changeme = function() {
console.log("changing");
}
};
So your problem has to be somewhere in declaration of controller or ng-app since code works, also check that data you have in editor icons is good.
I apologize for this simple question. I've been scouring other questions and still can't get it to work.
I have a function returning some key/value pairs
function(data){
console.log(data.message);
}
Returns...
Object {name: "mpierce486", body: "asfsf", time: "1 second ago"}
I have the following when not logging to console...
$scope.message = data.message
Lastly, here's the markup. I'm using a Laravel app so I'm escaping the {{ with #. Nothing shows up and I know it's a simple mistake. Please assist! Thanks!
<div ng-app="myApp" ng-controller="messageCtrl">
<div ng-repeat="x in message" class="main-user-post">
<h1>#{{ x.body }}</h1>
</div>
</div>
I don't think you can do an ng-repeat on an object. Since it's already an object, not an array, you can access it directly, without ng-repeat.
<div ng-app="myApp" ng-controller="messageCtrl">
<div class="main-user-post">
<h1>#{{ message.body }}</h1>
</div>
</div>
your message variable is an object, not an array. So in your iteration, x will take the value of each object properties (body, name, time).
So either use a different approach, or transform your message to an array:
$scope.message = [data.message];
you can iterate through object properties with angular like this:
<div ng-app="myApp" ng-controller="messageCtrl">
<div ng-repeat="(key, value) in message" class="main-user-post">
<h1>#{{value}}</h1>
</div>
</div>
Create object array as below.
JSFiddle - https://jsfiddle.net/L7k6g7ua/ for reference w.r.t AngularJs -
Hope this helps!
<body ng-app="SampleApp">
<div ng-controller="messageCtrl">
<div ng-repeat="m in message" class="main-user-post">
<h1>{{m.body}}</h1>
</div>
</div>
</body>
var sampleApp = angular.module("SampleApp", []);
sampleApp.controller('messageCtrl', function($scope) {
var myObject = {
name: "mpierce486",
body: "asfsf",
time: "1 second ago"
};
var myArray = [];
myArray.push(myObject);
$scope.message = myArray;
});
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);
};