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
Related
I would like to have a modal window using uikit popup in my react application.
When I include this code in my public/index.html file the modal is showing correctly:
<a uk-toggle href="#my-id">Teste Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
But it will not work if I try to use it from inside a react component like this:
<a className="uk-toggle" href="#my-id">Test Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div className="uk-modal-dialog uk-modal-body">
<button className="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
I can see the link but the click doesn't have any effect.
Am I doing something wrong?
EDIT
I added a jsfiddle, and I confirm the react version is still not working...
https://jsfiddle.net/umfk8jnc/9/
You have to add a data- prefix. Here is an updated JSFiddle link: https://jsfiddle.net/pd8nt5mx/
NOTE React will work with data-uk-* prefixes only.
Source: https://getuikit.com/docs/javascript#component-usage
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()
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>
I've created a demo in Plunker
, which I use angular-ui collaspe to work on bootstrap panel,
but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove the padding of panel-body, the animation looks smoothly. So how can I remain the padding and fix the animation issue?
You should put your panel-body inside another tag with panel-collapse class, like this:
<div class="panel-collapse" collapse="collaspe1">
<div class="panel-body">
<div class="group-item" ng-repeat="group in recommendedGroups">
<span>{{group.name}}</span>
<button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
</div>
</div>
</div>
See updated demo. I got this clue from markup for Accordion.
I am trying to add a switch to my partial view, it works as long as I am not switching the views using the ng-include. any idea why its breaking?
example in the plnkr code
basically this is what i am doing there:
<div ng-app="myApp">
<div ng-controller="RootController">
{{MyText}} : {{subview}}
<button ng-click="SelectAdmin()">Administration</button>
<button ng-click="SelectOperation()">Operations[Breaks!]</button>
<br/>
<div ng-switch="subview">
<div ng-switch-when="operations">
<div ng-include src="'./_partial.htm'"></div>
</div>
<div ng-switch-when="administration">
SHOWING :{{subview}}
<div class="make-switch switch-large">
<input type="checkbox" checked="" />
</div>
</div>
</div>
</div>
</div>
EDIT 1
To describe the issue a bit more:
When I start the page, I show the div that is not in the partial. i,e, set the subview = admionistrator and see an views as below.
now when i click on the "Operations" button i switch the view but use ng-include to load the partial view. and the partial view is actually showing the same content, but the view is messed up as seen in the image below.
Now even when i switch back to the earlier view by clicking on the Administrator button the make-switch is still broken.