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
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>
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
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';
});
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.
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