dummy data not being displayed in ng-repeat - javascript

New to angular, and did the codeschool course + the angular video from railscasts.
so this is my controller in the html file
<div ng-controller="ProviderDataCtrl">
<ul>
<li ng-repeat="entry in entries">
{{entry.name}}
</li>
</ul>
</div>
and this is the javascript file holding the controller
(function(){
app.controller('ProviderDataCtrl',function($scope){
$scope.entries = [
{name:"test"}
{name:"test2"}
{name:"test3"}
]
}]);
})();
for some reason in my html file, it just shows as {{entry.name}} and only 1 of it.
I cant seem to figure out the problem. Did i define the controller wrong in the js file??
Thanks

app is undefined
First define your angular app before using it
var app = angular.module('test',[]);
Demo Plunkr

Related

How to show another text value insteadof showing of existing from ng-repeat for one property using angularjs?

I have data:
html:
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in demo">
{{item.text}}
</li>
</ul>
</div>
js:
angular.module('MyApp', [])
.controller('MainCtrl', [function ($scope) {
$scope.demo=[
{"id":"ABC", "name":"ABC","text":"ABC"},
{"id":"PQR","name":"PQR","text":"PQR"},
{"id":"XYZ","name":"XYZ","text":"XYZ"}
];
}]);
I want to display the output like below on html view page:
ABC
PQR
MNO
instead of showing:
ABC
PQR
XYZ
i.e ex: I want to show the text value as: "MNO" instead of "XYZ" on displaying of view page, I don't want to change anything in the variable($scope.demoValues) using angularjs. I am not sure how to develop this. Please help me. Thanks.
Created Fiddle.
If you're simply looking to do a straight text replacement in the view when a particular value is encountered, you could use string.replace as follows:
<li ng-repeat="item in demo">
{{ item.text.replace('XYZ', 'MNO') }}
</li>

AngularJS controller function ambiguity

I am new to angularjs and I have been trying out few basic tutorials and I noticed some discrepancy on how controller is declared and used thus I wanted clarification
, for example in this JSfiddle link - http://jsfiddle.net/dakra/U3pVM/ the user has defined the controller as the function name which works perfectly fine for version 1.0.3 . I am using 1.3.15 version of angular and this approach isn't working for me
<html ng-app="myapp">
AngularJS data binding
<div data-ng-controller="SimpleController">
Name :
<br/>
<input type="text" ng-model="name"/>{{name |uppercase}}
<div>
<ul>
<li ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.names =['test1','test2','new'];
}
The above code just isn't working as it's showing an error of SimpleController being undefined function.
where as when I add this code instead of the above function, it works -
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.names = ['test1','test2'];
});
Thanks,
The simple declaration of controllers via
function MyCtrl($scope) {
}
was removed in Angular 1.3. Breaking changes: http://wildermuth.com/2014/11/11/Angular_1_3_and_Breaking_Change_for_Controllers

AngularJS smart-table global config implementation

table. For displaying buttons I am using this part of code,with a template
<ul class="pagination">
<li><div class="pageNumberClass" st-pagination="" st-template="/AppScripts/vendor/template/pagination.custom.html" st-items-by-page="itemsPerPage" colspan="4"></div></li>
</ul>
This link for template st-tamplate="/App...." is repeating on all pages. How can I make global configuration ?
You can configure it at application level
angular.module('myModule', []).
config(function(stConfig) {
stConfig.pagination.template = 'my-custom-pagination-tmpl.html';
});

AngularJS $scope data not rendering in view

I have been struggling with this problem for the past few days, and now i believe its time to reach out to the community for some help.
I am creating a website using the MEAN stack, this is my first time using Angular JS so i am a noobie.
The problem I am having is, I am not able to render ANY $scope data in my view. this has been driving me crazy because the AngularJS chrome debugger shows that the $scope data is there!!! But it wont render in my template.
App Structure
/public
/js
/controllers
-user.js
-app.js
/views
-index.html
Contents of my html - i will not copy entire file, only angular parts.
<!doctype html>
<html ng-app="PCT">
<div ng-controller="userController" class="column">
<a class="dropdown-toggle" data-toggle="dropdown" href="#userinfo" >
<img ng-src="{{user.img}}" style="width:40px; height:50px;" />
</a>
<ul class="dropdown-menu" role="menu">
<li><strong>{{user.name}}</strong></li>
<li><a ng-click="logOut()">Sign Out</a></li>
<li>Admin Site</li>
</ul>
</div>
<script src ="js/app.js"></script>
<script src="js/controllers/user.js"></script>
Contents of my app.js
angular.module('PCT.userController',[]);
//Importing all modules into main module
angular.module('PCT',['PCT.userController']);
Contents of my user.js (Controller)
angular.module('PCT').controller('userController', ['$scope', function($scope){
$scope.user = {
img : 'http://path/to/usr/img/user.jpg',
name : 'mcutalo'
};
$scope.logOut = function(){
console.log('logging out');
}
}]);
I am able to click on the Logout button in my menu, and this will trigger the console log, so it is making it to the controller. But it wont display my $scope data at all.
I am not sure what your question was, but if "PCT" is your module (it should match the name ng-app and the app.module("PCT") and no need to inject controller if u are defining controller using
angular.module('PCT').controller('userController', ['$scope', function($scope){
}]);
Here is the plnkr of the working one.
Updated with the Logout and it is called console.log...
http://plnkr.co/edit/uSLVqEayCh2XeeGI7LZe?p=preview
Let me know if any further help is needed.

Using routeProvider when not on site root

Sorry if I'm missing something obvious, very new to Angular.
I'm running an application on this page: //hosted.demo.ca/md/SitePages/Home.aspx
I'm trying to set up the routing on the application but the page is just rendering blank with no errors in console.
routeProvider:
var spApp = angular.module('spApp', [])
.config(function($routeProvider){
$routeProvider.when('/userView',
{
templateUrl: 'partials/userView.html',
controller: 'userCtrl'
})
});
and my html like such:
<div id="mdContainer" ng-cloak>
<!-- Navigation -->
<div id='mdSidebar'>
<ul>
<li id="menuHome"><a href='#'><span>Home</span></a></li>
<li id="menuUsers"><a href='#/userView'><span>Users</span></a></li>
<li id="menuGroups"><a href='#'><span>Groups</span></a></li>
<li id="menuSites"><a href='#'><span>Sites</span></a></li>
<li id="menuReports"><a href='#'><span>Reports</span></a></li>
</ul>
</div>
<!-- Main view -->
<ng-view></ng-view>
</div>
Have you added the route module? Please try using something like:
var spApp = angular.module('spApp', ['ngRoute'])
See here for more information about this. In newer versions of Angular the route functions were moved to a separate module.
Also I can tell you from personal experience that it is very easy to forget to add the angular-route.js file into your html file using something like:
<script src="path/to/angular-route.js">
If you use bower you can easily set this up with:
bower install angular-route

Categories

Resources