I'm missing something here in the wiring. When the button is clicked the alert in the method isn't displayed.
<div id="mapFilter" ng-controller="MapsController">
<div>
<h3>{{SelectedCustomer.officeName}}</h3>
<input type="button" ng-click="getProperties()" value="Get Data" />
</div>
<div>
<p>hotel count: {{allHotels.length}}</p>
<p>preferred count: {{preferredHotels.length}}</p>
</div>
</div>
The expected execution point:
$scope.getProperties = function () {
var msg = 'Unable to load Properties: ';
alert("getProperties");
Plunkr:
http://plnkr.co/edit/4eF1Wu4tURysTji0b5kO?p=preview
Thanks!
You have to add the ng-app directive to auto-bootstrap your application:
<body ng-app="main">
You will then get some errors in your plunker that you have to fix first (i.e. load ng-resource, ...)
Related
Im opening modal popup on click of one button. The modal popup is opening and i want to show one progress bar inside the modal popup. After getting the response i want to hide it.
The progress bar is not showing for the fisrt time if im closing and opening the popup again then it's showing.
Below is my controller code :
$scope.clickUpload = function(){
$('#import_poi_modal').modal('show');
setTimeout(function(){
$scope.fileChangeProgress = true;
console.log($scope.fileChangeProgress)
},1000);
}
HTML:
<div class="modal fade" id="import_poi_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="center-content" ng-show="fileChangeProgress"> //here im using the variable to show and hide
<div class="col-6">
<div class="progress m-t-30 m-b-30" >
<div class="progress-bar progress-bar-orange active progress-bar-striped" style="width: 100%; height:14px;" role="progressbar"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried with setTimeout. Still it's not working.
Since setTimeout is a javascript function(not an Angular one), you will need to use $apply to notify Angular for the changes.
setTimeout(function(){
$scope.$apply(
function() {
$scope.fileChangeProgress = true;
console.log($scope.fileChangeProgress);
}
);
},1000);
Another solution is to use the Angular native $timeout support:
$timeout(function(){
$scope.fileChangeProgress = true;
console.log($scope.fileChangeProgress)
},1000);
Should serve you the same purpose without $apply.
You can also refer to this $apply in setTimeout
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I am trying to display a modal when the view is loaded.
Code :
//View
<div id="showCom" ng-controller="showmodalCtrl" ng-init="init()">
<div class="modal fade" id="companyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please Select Company</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="control-label">Recipient:</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
//Controller
.controller('showmodalCtrl', ['$scope', function($scope){
$scope.init = function(){
$('#companyModal').modal("show");
}
}])
Everything works fine and the modal is displayed but I get this error on the console :
Type error : Cannot read property 'childNodes' of undefined
I have no idea why this is happening.
Also if I remove the "form" from the modal , i don't get any error. So I guess the problem is with the form but I am not able to resolve it.
Thanks in advance.
I had the same problem and I managed to resolve it by wrapping the modal open function inside a $timeout() or a normal setTimeout() function.
setTimeout(function(){
jQuery('#messageModal').modal('show');
}, 0);
I had the same error message when trying to use a JQuery plugin. Running it after document ready resolved the issue for me. The plugin was running fine but the angular code that followed in the current scope was not.
It was the "Set timeout"-answer in this thread that led me to try this solution.
Solution for me:
angular.element(document).ready(function () {
//Angular breaks if this is done earlier than document ready.
setupSliderPlugin();
});
As another solution in AngularJS context I'm using this approach:
Include $timeout module in your JS controller
Run init() function with all initializers like this:
$timeout(init, 0);
Works good.
Sorry for edit. Is your HTML well formed? Check that all the tags match.
In your code snippet, it looks like you're missing a closing div. check that - the one that closes the controller div.
I had a similar problem. It would throw an exception when i tried to add some html to dom and compile it using $compile in angularJs.
Inside of the html was another directive that tried to add some dom element from the page to somewhere else in the page.
I just had to call .clone of that element before i moved it to the new location.
And the exception was gone.
$popupContent = $(attrs.popupSelector).clone();
$container = $('<div class="popup-container"></div>');
$container.append($popupContent);
$container.hide();
$('body').append($container);
I've been working on an app for trainers and I have encountered possibly simple
problem, despite that I dont know how to fix this and I tried many different solutions.
What i've noticed is that it works pretty fine when input is above the list generated by ng-repeat but i want the list to be under the input.
Any suggestions will be appreciated.
Here is the html code as it is now:
<html ng-app="trainingSupport">
<form method="post" enctype="multipart/form-data" action="" ng-controller="addOffer">
<div class="span40"><input type="text" ng-model="newOffers.offerName" name="offer" class='span48 offer-in'></div>
<div class="span8 options-btn">
<div class="pencil-offer"><i class="icon-pencil icon-offer"></i></div>
<button ng-click="newOffer()" type='submit' class="btn save-offer"><i class="icon-save"></i></button>
<button type="submit" class="btn trash-offer"><i class="icon-trash"></i></button>
</div>
</form>
</div>
<div class="row-fluid">
<ol class="span48" ng-controller="addOffer">
<li ng-repeat="offer in offers" ng-bind='offer.offerName' class="unbold f-pt-sans offer-list"></li>
</ol>
</html>
and here is the tha angular code:
var trainingSupport = angular.module('trainingSupport', []);
function addOffer($scope){
$scope.offers=[
{id:0, offerName:"szkolenie z pieczenia indyka"},
{id:1, offerName:"szkolenie z gaszenia wodą"},
{id:2, offerName:"szkolenia z bicia konia"}
];
$scope.newOffer = function(){
$scope.offers.push({
offerName: $scope.newOffers.offerName
});
$scope.newOffers.offerName='';
}
}
trainingSupport.controller("addOffer", addOffer);
I created a jsFiddle for this, and chiseled your code down to the basics, for better readability.
http://jsfiddle.net/yhx8h/1/
I refactored your controller quite a bit, its much cleaner now.
var trainingSupport = angular.module('trainingSupport', []);
trainingSupport.controller("addOfferCtrl",
function AddOfferCtrl($scope){
//this variable is bound to your input
$scope.newOfferName = '';
$scope.offers=[
{id:0, offerName:"szkolenie z pieczenia indyka"},
{id:1, offerName:"szkolenie z gaszenia wodą"},
{id:2, offerName:"szkolenia z bicia konia"}
];
$scope.newOffer = function(){
//handy little method to grab the max id in your array
var newId = Math.max.apply(null,$scope.offers.map(function(item){return item.id}));
//increment the id, and add new entry to the array
$scope.offers.push(
{id: newId + 1, offerName: $scope.newOfferName }
);
};
});
And the HTML:
<div ng-app="trainingSupport" ng-controller="addOfferCtrl">
<input type="text" ng-model="newOfferName" />
<button ng-click="newOffer()" type="button" text="click me to add offer" ></button>
<ol>
<li ng-repeat="offer in offers">{{offer.offerName}}</li>
</ol>
</div>
I bound your input to a separate variable, newOfferName, and got rid of the extra submit button and the <form> tag. Judging from the code you posted, I don't see why you would need to use a <form> tag in this implementation, or a submit button. Instead, you can just bind an ng-click function to a button (or almost any other type of element really) which will handle updating your array and re-binding your list. Finally, I dont see why you need an ng-bind on your <li ng-repeat>, I removed that as well. Hopefully this refactored code helps you out!
I am updating an object within a resource.save callback like so:
$scope.addProfile = function () {
User.save( { "id": user_id }, $scope.createdProfile, function( savedUser, getResponseHeaders ) {
//$scope.$apply(function () {
$scope.user = savedUser;
console.debug($scope.user); // I doublechecked that this contains the correct data
//});
});
};
Unfortunately the view isn't updating correctly. As you can see I have already tried to wrap the thing in an apply, which results in an error "Error: $digest already in progress". Therefore i commented that bit out again.
The view bit which doesn't update looks like this:
<h1>{{user.name}}</h1>
{{user.location}}
...
The function addProfile is called from a button inside a form like so:
<form name='profileForm' >
<div class="section">
<label class="title">Name <span class="help">(required)</span>
<textarea ng-model="createdProfile.name" ></textarea>
</label>
</div>
<div class="section">
<button class="btn btn-large highlight" ng-disabled="!profileForm.$valid" ng-click="addProfile()">Save</button>
</div>
</form>
Thanks in advance for any help!
You aren't defining your controller in the html.
<ANY ng-controller="{expression}">
...
</ANY>