How to pass ng-model value to anchor tag which opens an HTML overlay?

Question

I have a scenario where I display many posts on a HTML page using AngularJS and every post, when clicked, shows associated data in an overlay. Data is displayed on main page using ng-repeat tag and when any one item is clicked, HTML overlay, defined in the same page opens.

Problem:

Only first result is shown on every item i.e. whenever I click on any post with different id, it opens displaying only first id. That's incorrect. For example, if my result is:

Windsor hotel,
Chancery
le Merridian.

and whenever an overlay is opened, it always shows Windsor for all.

Below is the code. please suggest.::

<div ng-repeat="post in allposts" style="background-color: #f8efc0" class="col-xs-10 col-md-11">
    <div>
        <a href="http://www.jquery2dotnet.com/2013/10/google-style-login-page-desing-usign.html">{{ post.postText}}</a>
        <div class="mic-info">
            By: <a href="#">{{ post.userEmail}}</a> on 2 March 2014
        </div>
    </div>
    <div class="action">
        <a href="#" class="btn btn-default btn-primary btn-xs">Your post is really helpful
                                                    <span class="glyphicon glyphicon-thumbs-up"></span></a>
        <a href="#" class="btn btn-default btn-warning btn-xs active">would suggest, be
                                                    specific in your requirement <span
                                                        class="glyphicon glyphicon-thumbs-down"></span></a>
        <!-- <button type="button" class="btn btn-danger btn-xs" title="Delete">
                                                     <span class="glyphicon glyphicon-trash"></span>
                                                 </button>-->
    </div>
    <a href="#"
        data-toggle="modal"
        data-target="#t_and_c_m">Comments of the post!</a>
    <div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
                </div>
                <div class="modal-body">
                    <div id="disqus_thread"></div>
                    <script type="text/javascript">
                        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

                        var disqus_shortname = 'pingled'; // required: replace example with your forum shortname

                        var disqus_identifier = 'postid';

                        alert(disqus_identifier);

                        var disqus_url = '';

                        /* * * DON'T EDIT BELOW THIS LINE * * */
                        (function () {
                            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                        })();

                        disqus_shortname = 'pingled'; // required: replace example with your forum shortname

                        disqus_identifier = undefined;

                        disqus_url = undefined;

                    </script>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

Please clarify and show the exact code where it displays overlay and code where you generate an id for specific content/post( Windsor hotel, Chancery, le Merridian.) — timestopper, Mar 18 '14 at 13:30
"Comments of the post" anchor invokes the Modal "#t_and_c_m" defined just after anchor tag in above code. and in ng-repeat (first div), it displays {{ post.postText }} or anything from JSON {{ post.id }} or {{ post.name }}, i want to pass {{ post.id to }} to #t_c_and_m modal. — AngryJS, Mar 18 '14 at 13:36

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

You can try to pass data to bootstrap 3 modal as here: Passing data to a bootstrap modal, as data id parameter: data-toggle="modal" data-id="{{post.id}}" ...

edited May 23 '17 at 11:56

Community

1
1

answered Mar 18 '14 at 13:30

timestopper

440
3
4

How to pass ng-model value to anchor tag which opens an HTML overlay?

1 Answers1