I have a button that when clicked makes a div disappear with ng-hide but i cant figure out how i can make the other div appear when i click that button. Right now my code is this:
<div class="col text-center"><button class="button b3" ng-click="goEsconder = !goEsconder">
Ver fotos
</button></div>
</div>
<div class="row" ng-hide="goEsconder">
<div class="col tipo"><p class="tip">Tipo de espaço:</p><p class="tip2">Escritório</p>
<p class="tip">Preço:</p><p class="tip2">{{detalhes[1]}}€/mês</p>
<div class="col tipo"><p class="tip">Condições:</p>
<p class="tip2">150 m2 de espaço
configurável</p>
</div>
My controller
.controller('perfilCtrl', ['$scope', '$stateParams', "detailService",// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, detailService) {
$scope.detalhes=detailService.data;
$scope.goEsconder = false;
}])
And i want this div to show when the button is clicked and the other div hides
<div class="imagem">
<img ng-src="http://www.comoditamodulados.com.br/wp-content/uploads/2015/12/executivo_-300x300.jpg" class="img-responsive img-thumbnail">
</div>
<div class="imagem" ng-hide="!goEsconder">
<img ng-src="http://www.comoditamodulados.com.br/wp-content/uploads/2015/12/executivo_-300x300.jpg" class="img-responsive img-thumbnail">
</div>
Or as #Adwaenyth mentioned.
<div class="imagem" ng-show="goEsconder">
<img ng-src="http://www.comoditamodulados.com.br/wp-content/uploads/2015/12/executivo_-300x300.jpg" class="img-responsive img-thumbnail">
</div>
Related
ng-repeat is commented out on chrome inspect
I can't seem to figure out how to get my ng-repeat to work. I can see that the correct information is scoped properly, but when I inspect the HTML in dev tools, the first line below is commented out and the cards don't show up. Any suggestions?
<div ng-repeat="matchedArtist in matchedArtists">
<div class="centerPandora">
<div class="row">
<div class="col-med-12">
<div class="content">
<div class="card">
<div class="firstinfo">
<img src="#" />
<div class="profileinfo">
<h1>{{ matchedArtist.artist }}</h1>
<h3>{{ matchedArtist.date }}</h3>
<h4>{{ matchedArtist.venue }}</h4>
<p class="bio"></p>
<a href="#">
<font color="black">Click for event details</font>
</a>
</div>
</div>
</div>
<div class="badgescard info"><span id="days"></span><span
id="hours"></span><span id="minutes"></span><span id="seconds"></span>
</div>
</div>
</div>
</div>
</div><br /><br /><br /><br />
</div>
'use strict';
var concertList =
angular.module('concertList').controller('ConcertListCtrl',
function($scope){
function hideLogin($scope) {
$scope.advstatus = true;
};
$scope.matchedArtists = matchedArtists
});
UPDATE
Here is a screenshot of the AngularJS scope showing events are being scoped properly
Firstly, you must to be sure that yours controllers works properly and goes inside html template.
Than $scope.matchedArtists - is an Array of objects in yours case
$scope.matchedArtists = [{artist: 'ártist', date: 'date', venue: 'venue '},
{artist: 'ártist2', date: 'date2', venue: 'venue2'}]
Debugging AngularJS Problems
To quickly test the variable on scope:
matchedArtists={{matchedArtists | json}} scope={{$id}}
<div ng-repeat="matchedArtist in matchedArtists">
<div class="centerPandora">
<div class="row">
<div class="col-med-12">
Using the inspection console, click on the element of interest:
>scope=angular.element($0).scope()
>console.dir(scope)
There are several possible reasons the data is not showing:
The template is part of an isolate scope;
The controller is on a sibling element;
The controller was instantiated with controllerAs syntax;
I am using angularjs and spring mvc for my application. At first I am displaying all the placements with one button Placed Candidates. I am doing ng-repeat for displaying all the placements.
Here is my html.
<div class="row" data-ng-repeat="placement in placements">
<div class="col-xs-12 col-sm-12 col-md-12">
<h5>{{placement.companyName}}</h5>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h6>{{placement.placementDate | date:'dd MMM yyyy'}}</h6>
Company Target (appox):10 Achieved:
</div>
<a href="javascript:void(0);" data-ng-
click="placedcandidatespopup(placement.placementId);">//here i can
get particular placementId but how to pass this id to
savePlacementStudents() method in controller.js???//
PlacedCandidates
</a>
</div>
I am calling one modal popup function. Here is controller.js
$scope.placedcandidatespopup = function()
{
AdminUsersService.getAllUsers().then(function(response)
{
$scope.allusers=response.data;
console.log($scope.allusers);
})
$(".placedcandidates").modal("show");
}
I am calling modal by name "placedcandidates".
Here is the modal
<div class="modal right fade placedcandidates" id="myModal1"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6" data-ng-
repeat="student in allusers">
<input id="{{student.studentId}}" type="checkbox" value="
{{student.studentId}}" data-ng-
checked="selection.indexOf(student.studentId) >-1"
data-ng-click="toggleSelection(student.studentId)"/>
<label for="{{student.studentId}}"></label>
{{student.firstName}}
</div>
</div>
</div>
<div class="modal-footer" style="position: fixed;">
<input type="button" value="Submit" class="btn" data-ng-
click="savePlacementStudents()">
</div>
</div>
</div>
</div>
After clicking on button popup modal will display with all Students with checkboxes placed beside them.Now I am able to save studentId into database.But I am not able to pass placementId for saving.
Here is my savePlacementStudents method in controller.js.
$scope.selectedStudents = {};
$scope.savePlacementStudents = function(selectedStudents)
{
selectedStudents.selectedList = $scope.selection;
AdminPlacementService.savePlacementStudents(selectedStudents).then
(function(response)
{
if(response.data=="success"){
$window.scrollTo(0,0);
$scope.selectedStudents = {};
$scope.getplacementdetails($scope.currentPageIndex);
$scope.successmessage="Student Selection Saved!;
$timeout(function() {
$scope.successmessage="";
$scope.closeplacedcandidatespopup();
}, 1500);
}
});
}
Can anyone tell how can I pass respective placementId to this saveStudents method() so that I can set that placementId for those students selected.
Here is the solution.
The placementId passed to function placedcandidatespopup can be saved as follows in function placedcandidatespopup
$scope.selectedPlacementId = placementId;
Now the same $scope will have access in Popup also as it is using same controller.js. And now you can use this $scope.selectedPlacementId anywhere in controller.js
So you don't need to pass placementId...!!
Hope that would help you..!!
$scope.placedcandidatespopup = function(id)
{
AdminUsersService.getAllUsers().then(function(response)
{
$scope.allusers=response.data;
console.log($scope.allusers);
})
$scope.inserted = {
placementId:id,
};
var modalInstance = $uibModal.open({
templateUrl: 'views/test/myModal1.html',
controller: 'TestCntrl',
size: "Modelwidth",
resolve: {
items: function () {
return $scope.inserted;
}
}
});
}
In model you have to access using items.placementId and when you savePlacementStudents() method send placementId as well with student info.
I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally.
Screenshot for reference
After Applying ng-repeat
If I leave out ng-repeat and use static items then it works as it should.
When used static
HTML Code for ng-repeat
<section class="mp diff-types-section main-movies-position">
<div class="mp our-recommend-sec">
<div id="owl-demo2" class="owl-carousel" ng-repeat="movie in movieList">
<div class="item">
<div class="types-section">
<img class="types-section-image image-opacity" ng-src="/public/uploads/{{movie.movieId}}/backdrop.jpg" />
</div>
</div>
</div>
</div>
</section>
AngularJs Controller Code
app.controller('MainCtrl', ['$rootScope', '$scope', '$http', '$resource', '$route', '$state', '$location', 'localStorageService', function($rootScope, $scope, $http, $resource, $route, $state, $location, localStorageService) {
$rootScope.showNav = true;
$rootScope.searchBar = false;
$scope.getAllMovieList = function() {
$http.get("/api/getAllMovieList")
.then(function(response) {
$scope.movieList = response.data;
console.log($scope.movieList);
});
}
$scope.getAllMovieList();
}])
If I Keep The Static Code Like This its Working Fine with no issues
<section class="mp diff-types-section our-reccomendation-section">
<div class=" mp our-recommend-sec">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<div class="types-section">
<a ng-click="goToMovieDetail()"> <img class="types-section-image" src="../../images/92ZhAYYce2KfuLgBswzW5HCMKxr.jpg"></a>
</div>
</div>
<div class="item">
<div class="types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="../../images/Shooter_1920x1080.jpg">
</div>
</div>
<div class="item">
<div class=" types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">
</div>
</div>
<div class="item">
<div class="types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">
</div>
</div>
</div>
</div>
</section>
Hope I get Solution For this...
Thanks in Advance.
Owl-carousel may not perfectly work with angularjs, would recommend you to use a carousel which supports angularjs, personally i use angular-ui-bootstrap, it has all components bootstrap has to offer but provides angular variants.
This solution would be helpful to you
Put owl carousel function after getting response
**use Like:**
$timeout(function(){ here your owl carousel function },10);
I want to create a text area where if i add some text and click on save, the text should be saved in localStorage. So if i open the text area again, i can see it still there.
HTML
<ion-view view-title="CWIN 2016 - Votre avis">
<ion-content>
<div class="list card user-infos-card">
<div class="item aw-dark-blue"> <h2 class="activity-name"></h2> Notes</div>
<textarea ng-model="note" rows="20" cols="50"></textarea>
<div class="item tabs tabs-secondary tabs-icon-left aw-dark-blue" ng-click="saveNote()" ng-model="note">Enregistrer vos notes</div>
<div ng-show="error">
<p class="form-error-message">Veuillez saisir des notes</p>
</div>
</div>
</ion-content>
</ion-view>
JS
angular.module('companion.noteBookController', ['LocalStorageModule'])
.controller('noteBookController', function ($scope, localStorageService){
$scope.note=localStorageService.get('note');
$scope.saveNote=function() {
localStorageService.set('note', $scope.note);
}
});
I don't underdstand the problem. Besides I don't have any errors.
Change this line
<div class="item tabs tabs-secondary tabs-icon-left aw-dark-blue" ng-click="saveNote(note)">Enregistrer vos notes</div>
and in js
angular.module('companion.noteBookController', ['$localStorage'])
.controller('noteBookController', function ($scope, $localStorage){
$scope.saveNote=function(note_val) {
console.log(note_val);
$localStorage.note = note_val;
}
});
if you want to get value then you can use this
var my_note = $localStorage.note;
I am trying to get an image and a text into the view "home" in a Single Page Application with Angular ui-router and $stateParams.
'use strict';
angular.module('confusionApp')
.controller('IndexController', ['$scope', '$stateParams', 'menuFactory', 'corporateFactory', function($scope, $stateParams, menuFactory, corporateFactory) {
var dish = menuFactory.getDish(parseInt($stateParams.id,10));
$scope.dish = dish;
var promo = menuFactory.getPromotion(parseInt($stateParams.id,10));
$scope.promo = promo;
$scope.leader = corporateFactory.getLeader($stateParams.abbr)
}])
.controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory) {
$scope.leaders = corporateFactory.getLeaders();
}])
The menuFactory service works fine in a 'MenuController' both with a list and with a parameter (injection while 'submit'). The corporateFactory works fine in a list using the 'AboutController'. But I just can't find out how to inject the $stateParam while index.html opens with the view 'home.html.
<div class="container" ng-controller="IndexController">
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h4>Implement the Featured Dish Here</h4>
<div class="media">
<div class="media-left media-middle">
<a>
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt={{dish.name}}>
</a>
</div>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
Would anybody help me, please?
don't use $stateParams
inject $state instead and then access
$state.params.wotever
Thanks for your precious help JB Nizet and danday74!
The problem was to let the template know the properties of which dish to show. The answers I found were in controllers.js. First, I had to correct an error, and then I created a $scope.property containing only the required dish:
var up = menuFactory.detDish(0);
$scope.up = up;
Then I could use {{up.image}}, {{up.name}} etc. in the template.