I am making a angularjs app and in this I have a list of users coming fromng-repeat. Now whenever I click on any user a new div box opens. But the problem is that there are multiple boxes opening for the same user and I want only one box for one user.
I tried using ng-if but failed.
I am sharing my code, please check it and provide solutions, thanks in advance.
Code from List of user are coming :
<div class="people">
<div ng-repeat="user in vm.otherUsers | filter : vm.search">
<div directive class="person" ng-click="vm.activateChat(user);bubble=true;" id="chat_{{user.id}}" ng-disabled="true">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble && user.counter>0" class="noti_bubble">{{user.counter}}</span>
</span>
</div>
</div>
</div>
and on click activateChat opens the new box for that user.
Code for the box is:
<div ng-repeat="chatUser in vm.multipleUsers">
<div class="msg_box" id="d_{{chatUser.id}}">
--box content--
</div>
</div>
Note: Only one box should open for a single user
You could keep a list of opened boxes per userId in your controller. Then add a function to your controller that you can use in an ng-if or ng-class to show a non-clickable version of your div. Use the same list to check if you should open a new modal in vm.activateChat()
Related
I am working with angularJS ng-repeat. So, I want to use my ng-repeat value in another div. I am doing the following. But it doesn't loop through and give me the exact value.
Code in ng-repeat
<div uib-slide index="$index" class="uibSlider" ng-repeat='id in code' ng-click="$parent.ContentId = id.ContentId" ng-class="{'selected' : ContentId.Id === ContentId}">
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
Code in Another Div
<div>
<label>{{(code| filter: {Id: ContentId}: true)[1].ContentId}}</label>
</div>
So, the problem is I have bunch of data and in the another div if I make the array value from 0 to 1. i'm getting null value. But automatically the value isn't changing based on what I contentID select. It always gives me the same value. I'm not sure where I'm going wrong.
Any Help would be appreciated.
You can use ng-repeat-start | ng-repeat-end
<div uib-slide ng-repeat-start='id in code'>
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
<div ng-repeat-end>
<label>{{(id.ContentId}}</label>
</div>
If you are trying to show the same data in a modal, depending where the user clicks:
<div ng-repeat="id in code">
<!-- when the user clicks here, the modal will open. The ID will be the same as the one clicking -->
<a ng-click="openModal(id)">Open modal for id: {{id}}</a>
</div>
Then in your controller you will have a function called openModal which takes a parameter (id) that will open the modal and pass along the data.
I'm trying to make use of wj-popup inside an ng-repeat in an AngularJS application, but am having difficulty.
Basically, I've used the demo example for wj-popup and wrapped it in an ng-repeat as follows. I have an array of posts, each has a property that is its indexValue (post.indexValue).
Each button needs to have a different ID, so I expect that using post.indexValue should work, and it does set the button ID on each repetition correctly, but the calling function doesn't work and the popup doesn't appear, and I'm not sure what I'm doing wrong.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Issue is with id. Pop up is not working even if there is no ng-repeat and owner id starts with any number. Changing button id to "btn{{post.indexValue}}" worked for me. Try this fiddle.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="btn{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#btn{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
So, I'm actually new to angularJS and I've been searching for a while and trying different ways to achieve something, but it seems impossible, to me.
I have this ng-repeat that should show only one of my 6 position array. When I click in "Change", than I should load the second and then the third and so on, until all my data have been accessed and changed by the user, that's why I limited it to 1.
The Professor's select should load according to a parameter from the current ng-repeat class. I have no idea how to solve this problem. I'm trying right now to use a service to load the professor's dropdown, but with no success.
<div class="row" **ng-repeat="class in classes | offset:currentPage | limitTo: 1"** on-finish-render="ngRepeatFinished">
<div style="display: block;">
<div>
<p><label for="">Change:</label> {{ class.professorName }}</p>
</div>
<div>
<p><label for="">By:</label>
<select id="professor" name="professor" class="form-control">
<option ng-repeat="professor in professors" value="{{professor.id}}">{{ professor.name }}</option>
</select>
</p>
</div>
</div>
</div>
<hr>
<center><button type="button" ng-click="change(class.classId)" class="btn btn-primary">Change</button></center>
</div>
What's the best way to achieve something like this (Show only one item each time and after user submits the form, go to the next position... and for each ng-repeat item, I have to reload the professors dropdown)?
Thank you!
Am I understanding you correctly, you want
ng-repeat class in classes //limit 1 //index i.e. [0] +1 change index after button click so you move to the next class index location?
If your setting a value of professor.id in the class or a property that isn't set or is null/undefined before the button, then just add this to your parent div with the loop of class in classes.
ng-if="!class.propName" //if property/dropdown not set
If this isn't what your looking for please expand on your question.
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>