I'm trying to display buttons for choosing a username with ng-repeat. The display is OK. But every button in the loop has a ng-click directive with a binding. This is also displayed correct in Google Chromes DOM-Explorer. But when one of the buttons is clicked the eventhandling function login() has {{user.userId}} as input instead the value of the parameter.
Hers my code:
<div class="cell large-3" ng-repeat="user in userData()" ng-class="{'large-offset-1': ($index % 3) != 0}">
<button ng-click="login('{{user.ID}}')" class="button expanded red bigButton"> {{user.userName}} </button>
</div>
Cntrl:
(function () {
'use strict';
angular.module('app').controller('loginCntrl', ['$scope', '$controller', '$location','dataService', 'mainService', initLoginCntrl]);
function initLoginCntrl($scope, $controller,$location, dataService, mainService) {
angular.extend(this, $controller('baseCntrl', {
$scope: $scope
}));
$scope.userData = dataService.getUserData;
$scope.login = function(userID) { <-- input of userid is {{userData.ID}} instead of the eal userID from Binding
mainService.login(userID);
}
}
})();
Thanks for your help in advance!
ng-click="login('{{userData.ID}}')" -> ng-click="login(userData.ID)"
You are passing a string into that function.
Related
Im having problem communicating child controller with parent controller,
i hv a function that push data to parent array which is included in ngrepeat.
after pushing the parent array is appended correctly, and its length is shown correctly in parent controller, yet the ngrepeat doesnot refresh.
<div ng-controller="parentCtrl">
This works {{shared.arr.length}} <br/>
This works Too{{shared.arr|json}} <br/>
<div ng-repeat="a in shared.arr">
{{a}} This dont, it only show old data.
</div>
<section ng-contoller="childCtrl">
<button ng-click="test()">Test</button>
</section>
</div>
angular.module('testApp')
.controller('parentCtrl', function ($scope) {
$scope.shared = {arr:[1,2]};
});
.controller('childCtrl', function ($scope) {
$scope.test = function(){$scope.shared.arr.push(4);}
});
angular.module('testApp', [])
.controller('parentCtrl', ['$scope', parentCtrl])
.controller('childCtrl', ['$scope', childCtrl]);
function parentCtrl ($scope) {
$scope.shared = {
arr: [1, 2]
};
}
function childCtrl ($scope) {
$scope.test = function (arr) {
arr.push(4);
}
}
<div ng-controller="childCtrl">
<button ng-click="test(shared.arr)">Test</button>
</div>
http://jsfiddle.net/kikill/zhzb3pxh/
try this code.
there were 2 mistakes:
1) ng-controller="childCtrl", not ng-contoller="childCtrl"
2) you passed into 'test' function parent's variable. It can make a lot of errors that no so clear in this example, but it can be.
Use 'controller as' syntax. You can read about this here.
Since this code is working fine in my case, I will assume that in your code also you have done the mistake of writing controller as contoller in<ng-contoller="childCtrl"> , which is a very silly mistake :)
I`m new to angularJS. I have a table, I make a request and output some default data in my tablerows from Controller2. Now I want to make a different request and output other data in the same table,but this time from Controller1. How can I do this ?
Html
<tr ng-repeat="stats in statsFromTable" ng-show="statsFromTable.length > 0">
<td><span ng-bind="stats.PERS"></span></td>
JavaScript
Controller2 -- > $scope.statsFromTable = data.REQUEST_ATTRIBUTES.historyList; // the first default request
Controller1 -- > ???
Don't use $rootScope to share info between controllers. For that purpouse you can use a service.
So your code could look like:
angular.
module('yourAngularModule', []).
controller('MyController', ['$scope','myService', function ($scope, myService) {
$scope.number1 = myService.number;
}]).
controller('MyController2', ['$scope','myService', function ($scope, myService) {
$scope.number2 = myService.number;
}]).
service('myService', [function() {
var service = {
number:0
};
return service;
}]);
})(window.angular);
And then you could bind the data like:
<div ng-controller="MyController">
<h3>Controller 1</h3>
{{number1}} // Will display service.number --> 0
</div>
<div ng-controller="MyController2">
<h3> Controller 2</h3>
{{number2}} // Will display service.number --> 0
</div>
I did a plnkr where you can take a look at how two different controllers share info via service.
you can use $rootScope to do this. here is the example demo for you i have created
I am trying to pop up a modal to get some input, but the angular binding via ng-model seems to be read only. This is my modal markup:
<script type="text/ng-template" id="signatureWindow.html">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Signature Capture</h4>
</div>
<input type="text" width="100px" ng-model="theName" />
<div class="modal-footer">
<button ng-click="accept()" class="btn btn-primary">Accept</button>
<button ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
</script>
Then, I invoke this modal as follows:
$scope.getSignatureModal = function(signatureBase64) {
var modalInstance = $modal.open({
templateUrl: 'signatureWindow.html',
controller: 'SignatureModalController',
size: 'lg',
resolve: {
signatureData: function() {
return signatureBase64;
}
}
});
modalInstance.result.then(function(signatureData) {
alert('Signed');
signatureBase64 = signatureData;
}, function() {
alert('Canceled');
});
};
And the following controller code for the modal:
MlamAngularApp.controller('SignatureModalController', function($scope, $modalInstance, signatureData) {
$scope.base64 = signatureData;
$scope.thename = "NamesRus";
$scope.accept = function() {
debugger;
$modalInstance.close($scope.thename);
}
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
}
});
The modal pops up as expected, and the input has the initial value "NamesRus", but when I close the modal, invoking accept in the modal controller, $scope.thename still has it's initial value, not any new value I type when the modal is active. What could be wrong here?
NOTE: At the debugger breakpoint in accept, no matter what I type in the modal's input, theName still has the initial assigned value.
MORE: My Plunker for this works fine. It's when in-place, in an ASP.NET MVC5 project, that I get the strange behaviour.
I think that you mix up two differents scopes.
If you want several variables to be passed to and retrieved from the modal you have to mention them:
in the resolve attribute
resolve: {modalData: function (){return {signatureData:$scope.base64,name:$scope.theName}}}
pass modalData as dependencie to your controller
MlamAngularApp.controller('SignatureModalController', function($scope, $modalInstance, modalData)
update the modal controller $scope with modalData
$scope.signatureData = modalData.signatureData;
$scope.name=modalData.name;
invoke
$modalInstance.close({signatureData:$scope.base64,name:$scope.theName})
reassign the original $scope with the result of promise
modalInstance.result.then(function (data) {
$scope.base64 = data.signatureData;
$scope.thename=data.name;
}
take a look at this plunker forked from ui-boostrap modal orginal example: http://plnkr.co/edit/whLSYt?p=info
I have html page like
<div ng-controller="userListControl">
...
</div>
<div ng-controller="userDetailsControl">
....
</div>
And i have angular Js code is
var userDirectory = angular.module('userDirectory',[]);
userDirectory.controller("userListControl", ['$scope','$http', function($scope, $http)
{
$http.get('data/userData.json').success (function(data){
$scope.users = data;
$scope.users.doClick = function(user,event) {
userInfo(user);
}
});
}]);
function userInfo(users)
{
console.log(user);
userDirectory.controller("userDetailsControl", function($scope)
{
console.log('well')
$scope.user = users;
console.log($scope.user)
});
}
Here Everything is working fine. But when we are calling click event, That userInfo called with particular Data. But Second controller gives an error(angular js Error).
I am new one in angular jS. I dont know this logic is correct or not.
I have list items in first Controller. When we are clicking on list, It gets data from particular list and passed to another design. That design have detailed data. So the 2nd controller shows particular list detailed Section
First, There is no need to declare your controller inside a function - I don't think that you're trying to lazy-load controllers. Make it available to your app when it starts.
Second, you need to pass data to the userDetailsControl controller. There are various ways to do this, but here you could just use the $rootScope.
var userDirectory = angular.module('userDirectory',[]);
userDirectory.controller("userListControl", function($scope, $rootScope, $http)
{
$scope.selectUser = function(user){
$rootScope.selectedUser = user;
}
$http.get('data/userData.json')
.success (function(data){
$scope.users = data;
});
})
.controller("userDetailsControl", function($scope, $rootScope){
$rootScope.$watch("selectedUser", function(newVal){
$scope.user = newVal;
}
}
and in your HTML:
<div ng-controller="userListControl">
<button ng-repeat="user in users" ng-click="selectUser(user)">{{user.name}}</button>
</div>
<div ng-controller="userDetailsControl">
<div>{{user.name}}</div>
<div>{{user.otherDetails}}</div>
</div>
I've created an application in angular js. In the application i'm having three controllers. The first controller MainController is in the body tag, within which i have another two controller FileController and TypeController.
Inside the TypeController I've a select box having the model name data.selectedFileTypes which shows several filenames. Now within the FileController controller I've another select box with model name fileproperty.allowsFiles, and having Yes and No values. The first time it get initialized within the FileController controller.
But when i select a different file from the select of the model data.selectedFileTypes how can i change the select value again to No of the model fileproperty.allowsFiles from the ng-change function of the file select
an anyone please tell me some solution for this
html
<body ng-controller="MainController">
:
:
<div ng-controller="TypeController">
<select ng-model="data.selectedFileTypes" ng-options="type.name for type in config.fileTypes ng-change="select()">
</select>
</div>
:
:
<div ng-controller="FileController">
<select ng-model="fileproperty.allowsFiles" ng-options="option.value as option.desc for option in files.options"></select>
</div>
:
:
</body>
script
app.controller('TypeController', function($rootScope, $scope)
{
$scope.select = function()
{
:
:
}
}
app.controller('FileController', function($rootScope, $scope)
{
$scope.fileproperty.allowsFiles = 'No';
}
Try this method.
app.controller('MainController', function($rootScope, $scope)
{
$scope.select = function()
{
:
$rootScope.selectedFiles = $scope.data.selectedFileTypes;
:
}
}
Inside your second controller
app.controller('FileController', function($rootScope, $scope)
{
$scope.$watch('selectedFiles', function () {
$scope.fileproperty.allowsFiles = 'No';
}, true);
}
You could also use $broadcast and $on here to handle this scenario:
app.controller('MainController', function($rootScope, $scope)
{
$scope.select = function()
{
$scope.$broadcast('someevent');
}
}
Inside your second controller
app.controller('FileController', function($rootScope, $scope)
{
$scope.$on('someevent', function () {
$scope.fileproperty.allowsFiles = 'No';
});
}
I think it's better practice to put shared properties into a service, then inject the service in both controllers.
Doesn't seem right to abuse a global namespace such as $rootScope when you don't have to.
Here's an example of a single service being bound to a select in one controller's scope and the same service being used in a second controller's scope to display the value in the service.
Here's a codepen: http://cdpn.io/LeirK and the snippets of code below
Here's the HTML:
<div ng-app="MyApp">
<div ng-controller="MainController">
<select ng-model='fileproperties.allowFiles'>
<option id="No">No</option>
<option id="Yes">Yes</option>
</select>
<div ng-controller="FileController">
{{fileproperties.allowFiles}}
<div>
</div>
</div>
And the Javascript:
var app = angular.module('MyApp',[]);
app.controller('MainController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
scope.fileproperties = fileproperties;
}]);
app.controller('FileController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
scope.fileproperties = fileproperties
}]);
app.service('FilePropertiesService', function(){
this.allowFiles = 'No';
});