I have a beginner issue with my AngularJS very simple code: I'm trying to pass data from a factory to a controller and print the object returned to my view, here's my code:
angular.module('app').factory('blogFactory',function(){
return {
//EDIT
post:{"author":"Bob","name":"smith","content":"some content"},
read: function(){
return this.post;
}
}
});
In the controller:
angular.module('app').controller('MainCtrl',['$scope','blogFactory'], function($scope, blogFactory){
$scope.datas = blogFactory.read();
console.log($scope.datas);});
When I console.log($scope.datas it logs the object fine. In the view I 'm unable to access the object's properties:
<section class="overview">
<article ng-repeat="data in datas">
<p>{{data.name}}</p> //Doesn't display anything
<p>{{data}}</p> // Displays the object
</article>
</section>
Does anyone has any idea? Thanks in advance
You don't have any property called name in $scope.datas
{"author":"Bob","content":"some content"}
You must be printing datas.author.
That's why <p>{{data.name}}</p> doesn't display any data.
As per your factory code, post is an object. But in your view you are using
<article ng-repeat="data in datas">
Which is not required. Just datas is enough to get that individual post
This code works fine I have tested it:
var app = angular.module('app',[])
app.factory('blogFactory',function(){
return {
post:{"author":"Bob","content":"some content"},
read: function(){
return this.post;
}
}
});
app.controller('MainCtrl', function($scope,blogFactory){
alert();
$scope.datas = blogFactory.read();
console.log($scope.datas);
})
For the view:
<body ng-controller ="MainCtrl">
<section class="overview">
<article ng-repeat="data in datas" >
<p>{{data.name}}</p>
<p>{{data}}</p>
</article>
</section>
</body>
Related
I have nested controller like:
<div ng-controller="MainController">
<div ng-controller="ChildController"></div>
</div>
Inside Child controller there is function:
$scope.isStatus = function() {
return function(item) {
}};
This function is used in ng-repeat.
So, problem is when I modify model of controller MainController it reload model of ChildController, It means that function isStatus() works again and reload model. How to fix it?
You can use controllerAs syntax to avoid this
<div ng-controller="MainController as main">
<div ng-controller="ChildController as child">
<ul ng-repeat ="item in child.item">
</div>
</div>
And in js
function ChildController (){
var vm = this;
vm.isStatus = function() {
return function(item) {
}};
}
you can see more infomation in here
https://github.com/johnpapa/angular-styleguide/tree/master/a1#controllers
I am new to Angular JS (1) and I am having issues with ng-repeat. I am using socket.io with Angular. Here is my controller:
var messagingApp = angular.module('messagingApp', []);
function mainController($scope) {
var socket = io.connect();
socket.on('message', function(data){
$scope.users.push({'Name': 'yeh'});
console.log($scope.users);
});
$scope.users = []; //if I put stuff here and comment out socket stuff, it shows in the front-end
};
messagingApp.controller('mainController',mainController);
I can see that it is going inside that on block (via console.log). However, it is not displaying anything to the front-end. My front-end is as follows:
<body ng-controller="mainController">
<div ng-repeat="user in users">
<p>{{ user.Name }}</p>
</div>
My understanding is that if you change the model (users in this case), it should automatically update the ng-repeat. Any help would be appreciated.
Add $scope.$apply() after pushing to the array. Because you are updating the model outside of the angular scope. So the angularjs doesnot know the model has been updated. More about $scope.$apply http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
you are pushing the object in array and try to iterate Array. So you should specify the position.
<body ng-controller="mainController">
<div ng-repeat="user in users">
<p>{{ user[$index].Name }}</p>
</div>
or try this..
socket.on('message', function(data){
$scope.users.data.push({'Name': 'yeh'});
console.log($scope.users.data);
});
$scope.users = {data:[]};
<div ng-repeat="user in users.data">
<p>{{ user.Name }}</p>
</div>
In my MVC program simple angular value controllers values are not binding.
My code is as follows :
_Layout.cshtml
<body data-ng-app="ShoppingCartApp">
<div class="container body-content">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Scripts/angular.js")
#Scripts.Render("~/Scripts/Custom/App.js")
#Scripts.Render("~/Scripts/Custom/ShoppingCartController.js")
#RenderSection("scripts", required: false)
<hr />
</div>
</body>
App.js
var app = angular.module('ShoppingCartApp', []);
ShoppingCartController.js
app.controller('ShoppingCartController', function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";
// On load events
// $scope.loadValues();
});
My Html Code is follows :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script></script>
<h2>Index</h2>
Total {{2+2}} // This value workd FINE
<div ng-controller="ShoppingCartController">
<div class="row">
<div class="nav navbar-nav navbar-left">
<h3>Total {{2+2}}</h3> // Not working THIS
</div>
<h1>{{test}}</h1> // Not working THIS
</div>
</div>
When i try to access value in controller or access directive inside controller it's not working. What i miss in here?
Change your controller to:
app.controller('ShoppingCartController', function($scope, $http) {....});
Or create a function named ShoppingCartController and then pass it to controller:
app.controller('ShoppingCartController', ShoppingCartController);
Also change $scope.ShoppingCartObj.products to $scope.ShoppingCartObj = {}; and then add products to that object $scope.ShoppingCartObj.products = []; because, prev you havnt defined what $scope.ShoppingCartObj is, so this object will be undefined.
If you're using Bundler you need to specify the Dependency Injection values
Also - ShoppingCartObj isn't declared anywhere so you can't assign to a property products
app.controller('ShoppingCartController', ['$scope', '$http',
function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj = {},
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";
}]);
Here's a working Jsfiddle
I have simple Scala Play Framework and Angular application. I tried to render JSON data on play's "xxx.scala.html" template but don't know what is the problem it is not rendering as expeted.
#main("Welcome to Play") {
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
<script>
app.controller('NamesCtrl', function($scope) {
// get names using AngularJS AJAX API
$http.get('/getNames').success(function(data){
$scope.names = data;
});
});
</script>
<div ng-app="app" ng-contoller="NamesCtrl">
<ul>
<li ng-repeat=" name in names">{{name}}</li>
</ul>
</div>
}
My route entry
GET /getNames controllers.HomeController.getNames
Scala Controller:
def getNames = Action {
val names = List("Bob","Mike","John")
Ok(Json.toJson(names)).as(JSON)
}
When I am calling my page using url
http://localhost:9000/getNames
I was getting response on page as below,
["Bob","Mike","John"]
Please can you explain what am I doing wrong here?
Thanks !!
There are some problems in the code. The correct one is this:
#main("Welcome to Play") {
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="NamesCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('NamesCtrl', function($scope, $http) {
$http.get('/getNames').success(function(data){
console.log(data);
$scope.names = data;
});
});
</script>
}
What has changed:
AngularJS 1.3.19 instead of 1.2.10
AngularJS module - which is referenced in the div
injected the $http service in the controller
your ng was wrong - it should be ng-controller instead of ng-contoller (a typo I guess)
The result is what you would expect:
newbie question: How can i pass a value from my HTML back to the Controller code:
FOr example, I want to pass the value '1234' to my js code.
<div ng-app="Test">
<div ng-controller="myCntlr">
<div ng-model="myModel" value="1234">
{{outputVal}}
</div>
</div>
</div>
JS controller:
test.controller('myCntlr', function ($scope, $filter) {
// access the value '1234' here ?
});
Thanks!