Solved

Angular JS question

Posted on 2016-10-20
24
39 Views
Last Modified: 2016-11-03
Hi,

I have a simple webpage that uses Angular JS.

I have an image displayed with some SPAN tags that overlay over the image (see screenshot).

The action I am trying to get working is:

When the user checks the "WALL" checkboxes - it will show which one has been check over the image.  Does this make sense?

Image

Please see the link here of my progress so far.

http://estimatingtool.azurewebsites.net

I have managed to get it to work using Text boxes - What the user enters in "Floor Width A (X)" and "Floor Width B (Y)" is shown over the image in the SPANS (I used some Jquery for this).

Hoping someone can help.
0
Comment
Question by:SmashAndGrab
  • 13
  • 11
24 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41851682
You need the ngShow directive
<span id="wall1" ng-show="ctrl.wall[0]">Span 1</span>
<span id="wall1" ng-show="ctrl.wall[1]">Span 2</span>

Open in new window

And then your checkboxes
Wall 1 <input type="checkbox" ng-model="ctrl.wall[0]" />
Wall 2 <input type="checkbox" ng-model="ctrl.wall[1]" />

Open in new window

CSS
.image-span {
  position: relative;
}
.image-span span {
  position: absolute;
  color: white;
  background: red;
  display: block;
  padding: 5px;
}
#wall1 {
  top: 10px;
  left: 10px;
}
#wall2 {
  top: 10px;
  right: 10px;
}
#wall3 {
  bottom: 10px;
  left: 10px;
}
#wall4 {
  bottom: 10px;
  right: 10px;
}
.image-span img {
  display: block;
  width: 100%;
}

Open in new window

HTML
<div class="row">
<div class="col-md-9">
  Wall 1 <input type="checkbox" ng-model="ctrl.wall[0]" /> Wall 2 <input type="checkbox" ng-model="ctrl.wall[1]" /> 
  Wall 3 <input type="checkbox" ng-model="ctrl.wall[2]" /> Wall 4 <input type="checkbox" ng-model="ctrl.wall[3]" />
</div>
<div class="col-md-3 image-span">
  <span id="wall1" ng-show="ctrl.wall[0]">Span 1</span>
  <span id="wall2" ng-show="ctrl.wall[1]">Span 2</span>
  <span id="wall3" ng-show="ctrl.wall[2]">Span 3</span>
  <span id="wall4" ng-show="ctrl.wall[3]">Span 4</span>
  
  <img src="images/foreground1.png" />
</div>
</div>

Open in new window

Angular
(function() {
  'use strict';
  angular.module('app',[])
    .controller('mainCtrl', mainController);

  function mainController()
  {
    var $ctrl = this;
    $ctrl.wall = [];
  }
})();

Open in new window


Working sample here
0
 

Author Comment

by:SmashAndGrab
ID: 41851730
That is AWESOME - exactly what I want!
0
 

Author Comment

by:SmashAndGrab
ID: 41851761
Hi Julian,

I am having some difficulty putting the code into my page - particually the Angular..

I'm not sure how it fits with my existing angular code..

Also, can you help me adjust the names of the checkboxes so they fit with my existing app.


This is what they were...


<input class="party-wall" data-wall="#PartyWall1" name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123" />
 wall-1
                             
 <input class="party-wall" data-wall="#PartyWall2" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" />
wall-2
                       
                     
<input class="party-wall" data-wall="#PartyWall3" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" />
 wall-3
                     
<input class="party-wall" data-wall="#PartyWall4" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" />
wall-4



Here's my full code:


<style>
    .msgVR
    {
        color:#b11d1d;
    }
    .msgVR:nth-child(2n) {
        color: #ffd800 !important;
    }
    .legends .msgRangeError {
        color: #ffd800 !important;
    }


            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
          
            
            /*
              span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}

                */


            .image-span {
  position: relative;
}
.image-span span {
  position: absolute;
  color: white;
  background: red;
  display: block;
  padding: 5px;
}
#wall1 {
  top: 10px;
  left: 10px;
}
#wall2 {
  top: 10px;
  right: 10px;
}
#wall3 {
  bottom: 10px;
  left: 10px;
}
#wall4 {
  bottom: 10px;
  right: 10px;
}
.image-span img {
  display: block;
  width: 100%;
}

</style>




<div class="container">
    <h1 class="page-title">Estimating Tool</h1>
</div>

<div class="container">

    <div class="row" data-gutter="60">
        <div class="col-lg-9 col-md-9">
            <div ng-show="frmEstimate.$invalid" class="alert alert-error">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please input correct values in all fields..
            </div>

            <section id="loginForm">
                <ng-form id="frmEstimate" name="frmEstimate">
                    <div class="row">
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.TypeOfConst.$invalid}">
                                <i class="fa fa-cubes input-icon input-icon-hightlight"></i>
                                <label>
                                    Type of Construction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.TypeOfConst.$invalid"></span>

                                </label>
                                <select class="form-control" data-val="true" required name="TypeOfConst" ng-change="CheckConstructionType()" ng-model="objPostData.ConstructionType" tabindex="1">
                                    <option value="">Select an Option</option>
                                    <option value="Timber Frame">Timber Frame</option>
                                    <option value="Traditional Masonry">Traditional Masonry</option>
                                </select>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.IsStairs.$invalid}">

                                <i class="fa fa-windows input-icon input-icon-hightlight"></i>
                                <label>Is there a stair opening in the floor?  <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.IsStairs.$invalid"></span></label>

                                <select class="form-control" name="IsStairs" required ng-change="CheckStairOpening()" ng-model="objPostData.StairOpening" tabindex="2">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.AX.$invalid}">

                                <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width A (X)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.AX.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.AX.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="AX" id="AX" max="12000" min="1000" ng-model="objPostData.FloorWidthA" tabindex="5" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.BY.$invalid}">

                                <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width B (Y)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.BY.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.BY.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="BY" id="BY" max="12000" min="1000" ng-model="objPostData.FloorWidthB" tabindex="6" />
                            </div>
                        </div>

                        <div ng-if="IsStairOpening">
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.CX.$invalid}">

                                    <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width C (X)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.CX.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle text-info" ng-show="frmEstimate.CX.$invalid"></span>
                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="CX" min="1000" max="12000" ng-model="objPostData.OpeningC" tabindex="3" />
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DY.$invalid}">

                                    <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width D (Y)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DY.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle " ng-show="frmEstimate.DY.$invalid"></span>

                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="DY" max="12000" min="1000" ng-model="objPostData.OpeningD" tabindex="4" />
                                </div>
                            </div>
                        </div>


                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DIR.$invalid}">

                                <i class="fa fa-arrows input-icon input-icon-hightlight"></i>
                                <label>
                                    Spanning direction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DIR.$invalid"></span>

                                </label>

                                <select class="form-control" required name="DIR" ng-model="objPostData.SpanningDirection" tabindex="7">
                                    <option value="">Select an Option</option>
                                    <option value="Up / Down">Up / Down</option>
                                    <option value="Left / Right">Left / Right</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.Stories.$invalid}">

                                <i class="fa fa-building input-icon input-icon-hightlight"></i>
                                <label>
                                    Does the house have more than 2 storeys?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.Stories.$invalid"></span>
                                </label>
                                <select class="form-control" required name="Stories" ng-model="objPostData.Stories" tabindex="8">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.SVP.$invalid}">

                                <i class="fa fa-bullhorn input-icon input-icon-hightlight"></i>
                                <label>
                                    Is there a soil vent pipe trimming within the floor zone?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.SVP.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="SVP" ng-model="objPostData.SVP" tabindex="9">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.PostCode.$invalid}">

                                <i class="fa fa-flag-checkered input-icon input-icon-hightlight"></i>
                                <label>
                                    Delivery Region
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.PostCode.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="PostCode" ng-model="objPostData.PostCode" tabindex="10">
                                    <option value="">Select a Postcode</option>
                                    <option value="AB">ABERDEEN</option>
                                    <option value="AL">ST ALBANS</option>
                                    <option value="B">BIRMINGHAM</option>
                                    <option value="BA">BATH</option>
                                    <option value="BB">BLACKBURN</option>
                                    <option value="BD">BRADFORD</option>
                                    <option value="BH ">BOURNEMOUTH</option>
                                    <option value="BL">BOLTON</option>
                                    <option value="BN">BRIGHTON</option>
                                    <option value="BR">BROMLEY</option>
                                    <option value="BS">BRISTOL</option>
                                    <option value="BT">BELFAST</option>
                                    <option value="CA">CARLISLE</option>
                                    <option value="CB">CAMBRIDGE</option>
                                    <option value="CF">CARDIFF</option>
                                    <option value="CH">CHESTER</option>
                                    <option value="CM">CHELMSFORD</option>
                                    <option value="CO">COLCHESTER</option>
                                    <option value="CR">CROYDON</option>
                                    <option value="CT">CANTERBURY</option>
                                    <option value="CV">COVENTRY</option>
                                    <option value="CW">CREWE</option>
                                    <option value="DA">DARTFORD</option>
                                    <option value="DD">DUNDEE</option>
                                    <option value="DE">DERBY</option>
                                    <option value="DG">DUMFRIES</option>
                                    <option value="DH">DURHAM</option>
                                    <option value="DL">DARLINGTON</option>
                                    <option value="DN">DONCASTER</option>
                                    <option value="DT">DORCHESTER</option>
                                    <option value="DY">DUDLEY</option>
                                    <option value="E">LONDON-EAST</option>
                                    <option value="EC">LONDON-EAST CENTRAL</option>
                                    <option value="EH">EDINBURGH</option>
                                    <option value="EN">ENFIELD</option>
                                    <option value="EX">EXETER</option>
                                    <option value="FK">FALKIRK</option>
                                    <option value="FY">FYLDE/BLACKPOOL</option>
                                    <option value="G">GLASGOW</option>
                                    <option value="GL">GLOUCESTER</option>
                                    <option value="GU">GUILDFORD</option>
                                    <option value="GY">GUERNSEY</option>
                                    <option value="HA">HARROW</option>
                                    <option value="HD">HUDDERSFIELD</option>
                                    <option value="HG">HARROGATE</option>
                                    <option value="HP">HEMEL HEMPSTEAD</option>
                                    <option value="HR">HEREFORD</option>
                                    <option value="HS">WESTERN ISLES</option>
                                    <option value="HU">HULL</option>
                                    <option value="HX">HALIFAX</option>
                                    <option value="IG">ILFORD</option>
                                    <option value="IM">ISLE OF MAN</option>
                                    <option value="IP">IPSWICH</option>
                                    <option value="IV">INVERNESS</option>
                                    <option value="JE">JERSEY</option>
                                    <option value="KA">KILMARNOCK</option>
                                    <option value="KT">KINGSTON-U-THAMES</option>
                                    <option value="KW">KIRKWALL, ORKNEY</option>
                                    <option value="KY">KIRKCALDY, FIFE</option>
                                    <option value="L">LIVERPOOL</option>
                                    <option value="LA">LANCASTER</option>
                                    <option value="LD">LLANDRINDOD WELLS</option>
                                    <option value="LE">LEICESTER</option>
                                    <option value="LL">LLANDUDNO</option>
                                    <option value="LN">LINCOLN</option>
                                    <option value="LS">LEEDS</option>
                                    <option value="LU">LUTON</option>
                                    <option value="M">MANCHESTER</option>
                                    <option value="ME">MEDWAY</option>
                                    <option value="MK">MILTON KEYNES</option>
                                    <option value="ML">MOTHERWELL</option>
                                    <option value="N">LONDON-NORTH</option>
                                    <option value="NE">NEWCASTLE-UPON-TYNE</option>
                                    <option value="NG">NOTTINGHAM</option>
                                    <option value="NN">NORTHAMPTON</option>
                                    <option value="NP">NEWPORT</option>
                                    <option value="NR">NORWICH</option>
                                    <option value="NW">LONDON-NORTH WEST</option>
                                    <option value="OL">OLDHAM</option>
                                    <option value="OX">OXFORD</option>
                                    <option value="PA">PAISLEY</option>
                                    <option value="PE">PETERBOROUGH</option>
                                    <option value="PH">PERTH</option>
                                    <option value="PL">PLYMOUTH</option>
                                    <option value="PO">PORTSMOUTH</option>
                                    <option value="PR">PRESTON</option>
                                    <option value="RG">READING</option>
                                    <option value="RH">REDHILL</option>
                                    <option value="RM">ROMFORD</option>
                                    <option value="S">SHEFFIELD</option>
                                    <option value="SA">SWANSEA</option>
                                    <option value="SE">LONDON- SOUTH EAST</option>
                                    <option value="SG">STEVENAGE</option>
                                    <option value="SK">STOCKPORT</option>
                                    <option value="SL">SLOUGH</option>
                                    <option value="SM">SUTTON</option>
                                    <option value="SN">SWINDON</option>
                                    <option value="SO">SOUTHAMPTON</option>
                                    <option value="SP">SALISBURY</option>
                                    <option value="SR">SUNDERLAND</option>
                                    <option value="SS">SOUTHEND-ON-SEA</option>
                                    <option value="ST">STOKE-ON-TRENT</option>
                                    <option value="SW">LONDON-SOUTH WEST</option>
                                    <option value="SY">SHREWSBURY</option>
                                    <option value="TA">TAUNTON</option>
                                    <option value="TD">GALASHIELS</option>
                                    <option value="TF">TELFORD</option>
                                    <option value="TN">TUNBRIDGE WELLS</option>
                                    <option value="TQ">TORQUAY</option>
                                    <option value="TR">TRURO</option>
                                    <option value="TS">CLEVELAND</option>
                                    <option value="TW">TWICKENHAM</option>
                                    <option value="UB">SOUTHALL</option>
                                    <option value="W">LONDON-WEST</option>
                                    <option value="WA">WARRINGTON</option>
                                    <option value="WC">LONDON-WEST CENTRAL</option>
                                    <option value="WD">WATFORD</option>
                                    <option value="WF">WAKEFIELD</option>
                                    <option value="WN">WIGAN</option>
                                    <option value="WR">WORCESTER</option>
                                    <option value="WS">WALSALL</option>
                                    <option value="WV">WOLVERHAMPTON</option>
                                    <option value="YO">YORK</option>
                                    <option value="ZE">LERWICK</option>
                                </select>
                            </div>
                        </div>




                        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>Which wall(s) are Party wall(s)? </label>
                               

                                Wall 1 <input type="checkbox" ng-model="ctrl.wall[0]" />
                                Wall 2 <input type="checkbox" ng-model="ctrl.wall[1]" />
                                Wall 3 <input type="checkbox" ng-model="ctrl.wall[3]" />
                                Wall 4 <input type="checkbox" ng-model="ctrl.wall[4]" />

                                <!--
                                 <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall1" name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123" />
                                    <label for="cb1">wall-1</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall2" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" />
                                    <label for="cb2">wall-2</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall3" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" />
                                    <label for="cb3">wall-3</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall4" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" />
                                    <label for="cb4">wall-4</label>
                                </div>
                            
                                    -->
                                    

                            

                                    </div>



                        </div>

                        <div class="col-md-6 col-lg-6 legends">
                            <span class="msgVR fa fa-asterisk"> </span>   User Must Enter <br />
                            <span class="msgVR fa fa-exclamation-triangle msgRangeError"></span>   Min 1000, Max 12000
                        </div>


                        <div class="col-lg-6 col-xs-6">
                            <input ng-disabled="frmEstimate.$invalid" class="btn btn-primary pull-right" tabindex="16" type="button" ng-click="SubmitForm()" value="Submit" />
                            <input id="ResetForm" class="btn btn-primary pull-right" type="reset" value="Reload Form" />
                            <img style="width 34px !important;" class="pull-right" ng-if="IsLoading" src="~/Content/loader.gif" />
                        </div>



                    </div>






                </ng-form>

            </section>
        </div>



        <div class="col-lg-3 col-md-3">
        <img src="/Content/directiondesign.png" class="img-responsive" />
        <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
        <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>

            <span id="wall1" ng-show="ctrl.wall[0]">Span 1</span>
            <span id="wall2" ng-show="ctrl.wall[1]">Span 2</span>
            <span id="wall3" ng-show="ctrl.wall[0]">Span 3</span>
            <span id="wall4" ng-show="ctrl.wall[1]">Span 4</span>


    </div>


         

        </div>

    <div ng-if="IsAllResults">

        <div class="row">
            <div class="col-lg-6">
                <h5>{{returnValues.Include1}}</h5>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="success">
                            <th>Floor Depth</th>
                            <th>220 mm</th>
                            <th>240 mm</th>
                            <th>300 mm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{returnValues.FloorDepth}}</td>
                            <td>£{{returnValues.val220}}</td>
                            <td>£{{returnValues.val240}}</td>
                            <td>£{{returnValues.val300}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3>Included in this price:</h3>
                <p>
                    {{returnValues.Include11}}
                </p>
                <p>
                    {{returnValues.Include2}}
                </p>
                <p>
                    {{returnValues.Include3}}
                </p>
                <p>
                    {{returnValues.Include4}}
                </p>
                <p>
                    {{returnValues.Include5}}
                </p>
                <p>
                    {{returnValues.Include6}}
                </p>
                <p>
                    {{returnValues.Include7}}
                </p>
                <p>
                    {{returnValues.Include8}}
                </p>
                <p>
                  {{returnValues.Include9}}
                </p>
                <p>
                    {{returnValues.Include10}}
                </p>
            </div>
        </div>
    </div>




    <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6  col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group form-group-icon-left">
                <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                <label>Email
                    <span class="msgVR fa fa-asterisk" ng-show="frmEm.em.$invalid"></span>
                </label>

                <input class="form-control" placeholder="Enter Email Address"  type="email" required name="em" ng-model="returnValues.Email" />
            </div>
        </div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
        </div>



        

    </ng-form> 
</div>


    <div class="gap">
</div>

            <div id="my_popup" class="well">
        
               An email has been sent to the address you specified.
                Thank you for using this tool.
                <p>&nbsp;</p>
                
               <!-- <button class="my_popup_open">Open popup</button>-->


                <button class="my_popup_close">Close</button>
            </div>

<script type="text/javascript">

    $(document).ready(function () {
   

        // Initialize the popup plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });


        $('#ResetForm').click(function () {
            location.reload();
        });
        

        
        $('#AX').change(function () {
            if ($.isNumeric(this.value)) {
                $('#DimensionA').html(this.value+ "    mm   ");
            }
            else {
                $('#DimensionA').html('Dimension A');
            }

            $('#BY').change(function () {
                if ($.isNumeric(this.value)) {
                    $('#DimensionB').html(this.value+"    mm   ");
                }
                else {
                    $('#DimensionB').html('Dimension B');
                }
            });
        });
     });


   

    myApp.controller('myController', function ($scope, $http) {

        $scope.objPostData = null;
        $scope.returnValues = null;
        $scope.IsStairOpening = false;
        $scope.IsPartWall = false;
        $scope.IsLoading = false;
        $scope.IsLoadingEmail = false;
        $scope.IsEmail = false;
        $scope.IsAllResults = false;
        $scope.IsResults1 = false;
        $scope.IsResults2 = false;




        $scope.SubmitForm = function () {
            $scope.IsLoading = true;
            $http({
                method: 'POST',
                url: '/api/values/PostForm',
                data: JSON.stringify($scope.objPostData)
            }).
            success(function (data) {
                $scope.returnValues = data;
                $scope.IsLoading = false;
                $scope.IsEmail = true;
                $scope.IsAllResults = true;
                $scope.IsResults1 = true;
                $scope.IsResults2 = true;
                //show the contents of the popup
                //$('#my_popup').popup('show');


            })
            .error(function (error) {
                $scope.IsLoading = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }
        $scope.CheckStairOpening = function()
        {
            if ($scope.objPostData.StairOpening == "Yes") {
                $scope.IsStairOpening = true;
                
            }
            else {
                $scope.IsStairOpening = false;
                
            }
        }

        $scope.CheckConstructionType = function () {
            if ($scope.objPostData.ConstructionType == "Timber Frame") {
                
                $scope.IsPartWall = true;
            }
            else {
               
                $scope.IsPartWall = false;
            }
        }

             



        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#my_popup').popup('show');

            })
            .error(function (error) {
                $scope.IsLoadingEmail = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }

        //end
    });
</script>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41851762
I hope I have made sense  :)  if not, please ask.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41851783
Looking at it - but it seems you are mixing JQuery and Angular - you should try and move away from jQuery in angular apps and use the Angular paradigm to do what you need. Because of Angular's 2way binding you can make use of state information in your model to govern interactions on the page - replacing what jQuery used to do.
0
 

Author Comment

by:SmashAndGrab
ID: 41851796
Thanks Julian,  I will be migrating the Jquery to Angular soon.    I just need to get this little bit working then I will start the transistion - Appreciate the feedback!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41851799
It is difficult to figure out what is going on in your code as you have not provided all of it.

From what I can tell you were going to use this for your checkboxes

objPostData.Wall1
objPostData.Wall2
objPostData.Wall3
objPostData.Wall4

Open in new window


If that is the case then just use that in your ng-show and your checkboxes.

The idea here is
Position your different spans where you want them with CSS.
Once they are in the right place add the ng-show directive and link that to the data in the model you want to use to show / hide the span.

The way ng-show works is if the expression in ng-show="expr" evaluats to a falsy (0, false, null, ' ') value then element is hidden otherwise it is shown.

When you click a checkbox with ng-model="objPostData.Wall1" it sets that value to a truthy value which then causes the span to show.

Sidebar - you need to get to grips with the Angular paradigm - it takes a bit of doing but once you do it becomes a lot easier.

Your #AX interactions do not need to be in jquery.

Your popup code - you can get Angular directives for this - like Angular Bootstrap.
0
 

Author Comment

by:SmashAndGrab
ID: 41851810
Hi Julian,

I wanted to try and incorporate your working code into my existing application.  Thats what I am having trouble with.

When the user submits the form the application then process's the the users inputs.

wallimage.PNG
I just wanted your code to work with my app - thats all.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41851822
So lets start with your working app - go back to what it was before "my changes"

Then post the following
Your checkbox markup
Your span markup

With the above I am assuming that your <span>'s are already styled to be in the right place - or is that part of what you are asking?

If the <span>'s are in the right place (they should all be showing) and the checkboxes are setup then we can take it from there to wire the two together.
0
 

Author Comment

by:SmashAndGrab
ID: 41851834
cool.

Check this..

http://estimatingtool.azurewebsites.net

(choose timber frame from the manufacturing type of construction to show the WALL# checkboxes)

<style>
    .msgVR
    {
        color:#b11d1d;
    }
    .msgVR:nth-child(2n) {
        color: #ffd800 !important;
    }
    .legends .msgRangeError {
        color: #ffd800 !important;
    }


            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
            span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}

</style>




<div class="container">
    <h1 class="page-title">Estimating Tool</h1>
</div>

<div class="container">

    <div class="row" data-gutter="60">
        <div class="col-lg-9 col-md-9">
            <div ng-show="frmEstimate.$invalid" class="alert alert-error">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please input correct values in all fields..
            </div>

            <section id="loginForm">
                <ng-form id="frmEstimate" name="frmEstimate">
                    <div class="row">
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.TypeOfConst.$invalid}">
                                <i class="fa fa-cubes input-icon input-icon-hightlight"></i>
                                <label>
                                    Type of Construction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.TypeOfConst.$invalid"></span>

                                </label>
                                <select class="form-control" data-val="true" required name="TypeOfConst" ng-change="CheckConstructionType()" ng-model="objPostData.ConstructionType" tabindex="1">
                                    <option value="">Select an Option</option>
                                    <option value="Timber Frame">Timber Frame</option>
                                    <option value="Traditional Masonry">Traditional Masonry</option>
                                </select>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.IsStairs.$invalid}">

                                <i class="fa fa-windows input-icon input-icon-hightlight"></i>
                                <label>Is there a stair opening in the floor?  <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.IsStairs.$invalid"></span></label>

                                <select class="form-control" name="IsStairs" required ng-change="CheckStairOpening()" ng-model="objPostData.StairOpening" tabindex="2">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.AX.$invalid}">

                                <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width A (X)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.AX.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.AX.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="AX" id="AX" max="12000" min="1000" ng-model="objPostData.FloorWidthA" tabindex="5" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.BY.$invalid}">

                                <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width B (Y)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.BY.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.BY.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="BY" id="BY" max="12000" min="1000" ng-model="objPostData.FloorWidthB" tabindex="6" />
                            </div>
                        </div>

                        <div ng-if="IsStairOpening">
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.CX.$invalid}">

                                    <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width C (X)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.CX.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle text-info" ng-show="frmEstimate.CX.$invalid"></span>
                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="CX" min="1000" max="12000" ng-model="objPostData.OpeningC" tabindex="3" />
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DY.$invalid}">

                                    <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width D (Y)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DY.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle " ng-show="frmEstimate.DY.$invalid"></span>

                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="DY" max="12000" min="1000" ng-model="objPostData.OpeningD" tabindex="4" />
                                </div>
                            </div>
                        </div>


                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DIR.$invalid}">

                                <i class="fa fa-arrows input-icon input-icon-hightlight"></i>
                                <label>
                                    Spanning direction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DIR.$invalid"></span>

                                </label>

                                <select class="form-control" required name="DIR" ng-model="objPostData.SpanningDirection" tabindex="7">
                                    <option value="">Select an Option</option>
                                    <option value="Up / Down">Up / Down</option>
                                    <option value="Left / Right">Left / Right</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.Stories.$invalid}">

                                <i class="fa fa-building input-icon input-icon-hightlight"></i>
                                <label>
                                    Does the house have more than 2 storeys?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.Stories.$invalid"></span>
                                </label>
                                <select class="form-control" required name="Stories" ng-model="objPostData.Stories" tabindex="8">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.SVP.$invalid}">

                                <i class="fa fa-bullhorn input-icon input-icon-hightlight"></i>
                                <label>
                                    Is there a soil vent pipe trimming within the floor zone?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.SVP.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="SVP" ng-model="objPostData.SVP" tabindex="9">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.PostCode.$invalid}">

                                <i class="fa fa-flag-checkered input-icon input-icon-hightlight"></i>
                                <label>
                                    Delivery Region
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.PostCode.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="PostCode" ng-model="objPostData.PostCode" tabindex="10">
                                    <option value="">Select a Postcode</option>
                                    <option value="AB">ABERDEEN</option>
                                    <option value="AL">ST ALBANS</option>
                                    <option value="B">BIRMINGHAM</option>
                                    <option value="BA">BATH</option>
                                    <option value="BB">BLACKBURN</option>
                                    <option value="BD">BRADFORD</option>
                                    <option value="BH ">BOURNEMOUTH</option>
                                    <option value="BL">BOLTON</option>
                                    <option value="BN">BRIGHTON</option>
                                    <option value="BR">BROMLEY</option>
                                    <option value="BS">BRISTOL</option>
                                    <option value="BT">BELFAST</option>
                                    <option value="CA">CARLISLE</option>
                                    <option value="CB">CAMBRIDGE</option>
                                    <option value="CF">CARDIFF</option>
                                    <option value="CH">CHESTER</option>
                                    <option value="CM">CHELMSFORD</option>
                                    <option value="CO">COLCHESTER</option>
                                    <option value="CR">CROYDON</option>
                                    <option value="CT">CANTERBURY</option>
                                    <option value="CV">COVENTRY</option>
                                    <option value="CW">CREWE</option>
                                    <option value="DA">DARTFORD</option>
                                    <option value="DD">DUNDEE</option>
                                    <option value="DE">DERBY</option>
                                    <option value="DG">DUMFRIES</option>
                                    <option value="DH">DURHAM</option>
                                    <option value="DL">DARLINGTON</option>
                                    <option value="DN">DONCASTER</option>
                                    <option value="DT">DORCHESTER</option>
                                    <option value="DY">DUDLEY</option>
                                    <option value="E">LONDON-EAST</option>
                                    <option value="EC">LONDON-EAST CENTRAL</option>
                                    <option value="EH">EDINBURGH</option>
                                    <option value="EN">ENFIELD</option>
                                    <option value="EX">EXETER</option>
                                    <option value="FK">FALKIRK</option>
                                    <option value="FY">FYLDE/BLACKPOOL</option>
                                    <option value="G">GLASGOW</option>
                                    <option value="GL">GLOUCESTER</option>
                                    <option value="GU">GUILDFORD</option>
                                    <option value="GY">GUERNSEY</option>
                                    <option value="HA">HARROW</option>
                                    <option value="HD">HUDDERSFIELD</option>
                                    <option value="HG">HARROGATE</option>
                                    <option value="HP">HEMEL HEMPSTEAD</option>
                                    <option value="HR">HEREFORD</option>
                                    <option value="HS">WESTERN ISLES</option>
                                    <option value="HU">HULL</option>
                                    <option value="HX">HALIFAX</option>
                                    <option value="IG">ILFORD</option>
                                    <option value="IM">ISLE OF MAN</option>
                                    <option value="IP">IPSWICH</option>
                                    <option value="IV">INVERNESS</option>
                                    <option value="JE">JERSEY</option>
                                    <option value="KA">KILMARNOCK</option>
                                    <option value="KT">KINGSTON-U-THAMES</option>
                                    <option value="KW">KIRKWALL, ORKNEY</option>
                                    <option value="KY">KIRKCALDY, FIFE</option>
                                    <option value="L">LIVERPOOL</option>
                                    <option value="LA">LANCASTER</option>
                                    <option value="LD">LLANDRINDOD WELLS</option>
                                    <option value="LE">LEICESTER</option>
                                    <option value="LL">LLANDUDNO</option>
                                    <option value="LN">LINCOLN</option>
                                    <option value="LS">LEEDS</option>
                                    <option value="LU">LUTON</option>
                                    <option value="M">MANCHESTER</option>
                                    <option value="ME">MEDWAY</option>
                                    <option value="MK">MILTON KEYNES</option>
                                    <option value="ML">MOTHERWELL</option>
                                    <option value="N">LONDON-NORTH</option>
                                    <option value="NE">NEWCASTLE-UPON-TYNE</option>
                                    <option value="NG">NOTTINGHAM</option>
                                    <option value="NN">NORTHAMPTON</option>
                                    <option value="NP">NEWPORT</option>
                                    <option value="NR">NORWICH</option>
                                    <option value="NW">LONDON-NORTH WEST</option>
                                    <option value="OL">OLDHAM</option>
                                    <option value="OX">OXFORD</option>
                                    <option value="PA">PAISLEY</option>
                                    <option value="PE">PETERBOROUGH</option>
                                    <option value="PH">PERTH</option>
                                    <option value="PL">PLYMOUTH</option>
                                    <option value="PO">PORTSMOUTH</option>
                                    <option value="PR">PRESTON</option>
                                    <option value="RG">READING</option>
                                    <option value="RH">REDHILL</option>
                                    <option value="RM">ROMFORD</option>
                                    <option value="S">SHEFFIELD</option>
                                    <option value="SA">SWANSEA</option>
                                    <option value="SE">LONDON- SOUTH EAST</option>
                                    <option value="SG">STEVENAGE</option>
                                    <option value="SK">STOCKPORT</option>
                                    <option value="SL">SLOUGH</option>
                                    <option value="SM">SUTTON</option>
                                    <option value="SN">SWINDON</option>
                                    <option value="SO">SOUTHAMPTON</option>
                                    <option value="SP">SALISBURY</option>
                                    <option value="SR">SUNDERLAND</option>
                                    <option value="SS">SOUTHEND-ON-SEA</option>
                                    <option value="ST">STOKE-ON-TRENT</option>
                                    <option value="SW">LONDON-SOUTH WEST</option>
                                    <option value="SY">SHREWSBURY</option>
                                    <option value="TA">TAUNTON</option>
                                    <option value="TD">GALASHIELS</option>
                                    <option value="TF">TELFORD</option>
                                    <option value="TN">TUNBRIDGE WELLS</option>
                                    <option value="TQ">TORQUAY</option>
                                    <option value="TR">TRURO</option>
                                    <option value="TS">CLEVELAND</option>
                                    <option value="TW">TWICKENHAM</option>
                                    <option value="UB">SOUTHALL</option>
                                    <option value="W">LONDON-WEST</option>
                                    <option value="WA">WARRINGTON</option>
                                    <option value="WC">LONDON-WEST CENTRAL</option>
                                    <option value="WD">WATFORD</option>
                                    <option value="WF">WAKEFIELD</option>
                                    <option value="WN">WIGAN</option>
                                    <option value="WR">WORCESTER</option>
                                    <option value="WS">WALSALL</option>
                                    <option value="WV">WOLVERHAMPTON</option>
                                    <option value="YO">YORK</option>
                                    <option value="ZE">LERWICK</option>
                                </select>
                            </div>
                        </div>




                        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>Which wall(s) are Party wall(s)? </label>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall1" name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123" />
                                    <label for="cb1">wall-1</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall2" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" />
                                    <label for="cb2">wall-2</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall3" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" />
                                    <label for="cb3">wall-3</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="party-wall" data-wall="#PartyWall4" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" />
                                    <label for="cb4">wall-4</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 legends">
                            <span class="msgVR fa fa-asterisk"> </span>   User Must Enter <br />
                            <span class="msgVR fa fa-exclamation-triangle msgRangeError"></span>   Min 1000, Max 12000
                        </div>


                        <div class="col-lg-6 col-xs-6">
                            <input ng-disabled="frmEstimate.$invalid" class="btn btn-primary pull-right" tabindex="16" type="button" ng-click="SubmitForm()" value="Submit" />
                            <input id="ResetForm" class="btn btn-primary pull-right" type="reset" value="Reload Form" />
                            <img style="width 34px !important;" class="pull-right" ng-if="IsLoading" src="~/Content/loader.gif" />
                        </div>



                    </div>






                </ng-form>

            </section>
        </div>



        <div class="col-lg-3 col-md-3">
        <img src="/Content/directiondesign.png" class="img-responsive" />
        <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
        <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>

        <!-- Party Wall spans
        <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
        <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
        <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
        <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
        -->

        <span id="PartyWall1">Wall 1</span>
        <span id="PartyWall2">Wall 2</span>
        <span id="PartyWall3">Wall 3</span>
        <span id="PartyWall4">Wall 4</span>


    </div>


         

        </div>

    <div ng-if="IsAllResults">

        <div class="row">
            <div class="col-lg-6">
                <h5>{{returnValues.Include1}}</h5>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="success">
                            <th>Floor Depth</th>
                            <th>220 mm</th>
                            <th>240 mm</th>
                            <th>300 mm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{returnValues.FloorDepth}}</td>
                            <td>£{{returnValues.val220}}</td>
                            <td>£{{returnValues.val240}}</td>
                            <td>£{{returnValues.val300}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3>Included in this price:</h3>
                <p>
                    {{returnValues.Include11}}
                </p>
                <p>
                    {{returnValues.Include2}}
                </p>
                <p>
                    {{returnValues.Include3}}
                </p>
                <p>
                    {{returnValues.Include4}}
                </p>
                <p>
                    {{returnValues.Include5}}
                </p>
                <p>
                    {{returnValues.Include6}}
                </p>
                <p>
                    {{returnValues.Include7}}
                </p>
                <p>
                    {{returnValues.Include8}}
                </p>
                <p>
                  {{returnValues.Include9}}
                </p>
                <p>
                    {{returnValues.Include10}}
                </p>
            </div>
        </div>
    </div>




    <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6  col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group form-group-icon-left">
                <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                <label>Email
                    <span class="msgVR fa fa-asterisk" ng-show="frmEm.em.$invalid"></span>
                </label>

                <input class="form-control" placeholder="Enter Email Address"  type="email" required name="em" ng-model="returnValues.Email" />
            </div>
        </div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
        </div>



        

    </ng-form> 
</div>


    <div class="gap">
</div>

            <div id="my_popup" class="well">
        
               An email has been sent to the address you specified.
                Thank you for using this tool.
                <p>&nbsp;</p>
                
               <!-- <button class="my_popup_open">Open popup</button>-->


                <button class="my_popup_close">Close</button>
            </div>

<script type="text/javascript">

    $(document).ready(function () {


        
       
        

        // Initialize the popup plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });


        $('#ResetForm').click(function () {
            location.reload();
        });
        


        $('.party-wall').on('change', function () {
            console.log('wall event for #' + $(this).attr('id'));
            var isChecked = $(this).is(':checked');
            var wall = $($(this).attr('data-wall'));
            wall.css('border', isChecked ? 'solid 1px black' : 'none');
            wall.attr('data-name', wall.attr('data-name') || wall.text());
            wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
        });

      
        
        $('#AX').change(function () {
            if ($.isNumeric(this.value)) {
                $('#DimensionA').html(this.value+ "    mm   ");
            }
            else {
                $('#DimensionA').html('Dimension A');
            }

            $('#BY').change(function () {
                if ($.isNumeric(this.value)) {
                    $('#DimensionB').html(this.value+"    mm   ");
                }
                else {
                    $('#DimensionB').html('Dimension B');
                }
            });
        });
     });


   

    myApp.controller('myController', function ($scope, $http) {

        $scope.objPostData = null;
        $scope.returnValues = null;
        $scope.IsStairOpening = false;
        $scope.IsPartWall = false;
        $scope.IsLoading = false;
        $scope.IsLoadingEmail = false;
        $scope.IsEmail = false;
        $scope.IsAllResults = false;
        $scope.IsResults1 = false;
        $scope.IsResults2 = false;


        $scope.SubmitForm = function () {
            $scope.IsLoading = true;
            $http({
                method: 'POST',
                url: '/api/values/PostForm',
                data: JSON.stringify($scope.objPostData)
            }).
            success(function (data) {
                $scope.returnValues = data;
                $scope.IsLoading = false;
                $scope.IsEmail = true;
                $scope.IsAllResults = true;
                $scope.IsResults1 = true;
                $scope.IsResults2 = true;
                //show the contents of the popup
                //$('#my_popup').popup('show');


            })
            .error(function (error) {
                $scope.IsLoading = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }
        $scope.CheckStairOpening = function()
        {
            if ($scope.objPostData.StairOpening == "Yes") {
                $scope.IsStairOpening = true;
                
            }
            else {
                $scope.IsStairOpening = false;
                
            }
        }

        $scope.CheckConstructionType = function () {
            if ($scope.objPostData.ConstructionType == "Timber Frame") {
                
                $scope.IsPartWall = true;
            }
            else {
               
                $scope.IsPartWall = false;
            }
        }

      

      


       



        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#my_popup').popup('show');

            })
            .error(function (error) {
                $scope.IsLoadingEmail = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }

        //end
    });
</script>

Open in new window

0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41851845
It should be as simple as this
<span id="PartyWall1" ng-show="objPostData.Wall1">Wall 1</span>
<span id="PartyWall2" ng-show="objPostData.Wall2">Wall 2</span>
<span id="PartyWall3" ng-show="objPostData.Wall3">Wall 3</span>
<span id="PartyWall4" ng-show="objPostData.Wall4">Wall 4</span>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41851911
Hi Julian,

That worked - thank you.

One last question..

1.  I would like the WALL 1, WALL 2 etc to be displayed as default.
2. When the user clicks the checkboxes - it is highlighted (like in your example (red box and white writing)
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41851960
1. Just set the values to true in your controller
objPostData.Wall1=true;
objPostData.Wall2=true;

Open in new window


2. Do you want the span totally hidden until a click or visible and only the styling changes?

One approach uses ng-show as you are using now the other is ng-class - which selectively applies a class on the same principle.
0
 

Author Comment

by:SmashAndGrab
ID: 41851972
Thanks.

I want the span to just show the text as default THEN if the user clicks - add the styling.
0
 

Author Comment

by:SmashAndGrab
ID: 41851982
Effecttivley just adding some emphasis when the user clicks the checkboxes
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41852015
Then you want ng-class
Take the ng-show out and do as follows
<span id="wall1" ng-class="{selected: objPostData.Wall1}">Span 1</span>
<span id="wall2" ng-class="{selected: objPostData.Wall2}">Span 2</span>
<span id="wall3" ng-class="{selected: objPostData.Wall3}">Span 3</span>
<span id="wall4" ng-class="{selected: objPostData.Wall4}">Span 4</span>

Open in new window

Where "selected" is the name of the class that gives the background.
I have updated the sample I posted earlier to use code more in line with your app.

You can view it here
0
 

Author Comment

by:SmashAndGrab
ID: 41852344
Hi Julian - did this makes sense?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41852450
Hi Julian - did this makes sense?
Not sure what "this" is ...:)
0
 

Author Comment

by:SmashAndGrab
ID: 41853708
Hi Julian,

oops sorry!

I was wondering if you could help me with the styling and the show part.

1. When the page loads show all the WALL 1,2,3,4 text on the image.
2. When the user selects the checkboxes - highlight which ones have been selected (the exact same as in your mickey mouse image would be ideal!)
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41853791
Boy do I feel dumb!

I posted this yesterday .... as a Hidden comment. I can see it but you wouldn't have been able to.

I have just un-hidden it. Apologies for that. The post shows a revised sample on how to do what you are asking for.
0
 

Author Comment

by:SmashAndGrab
ID: 41872039
hi Julian,

Thanks.

I added the angular:

            <span id="PartyWall1" ng-class="{selected: objPostData.Wall1}">Wall 1</span>
            <span id="PartyWall2" ng-class="{selected: objPostData.Wall2}">Wall 2</span>
            <span id="PartyWall3" ng-class="{selected: objPostData.Wall3}">Wall 3</span>
            <span id="PartyWall4" ng-class="{selected: objPostData.Wall4}">Wall 4</span>

When I test - they show as default but I dont get any border when they are selected?

http://estimatingtool.azurewebsites.net/

Have I missed something?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41872156
Yes - I can't see where you have defined the class .selected.

The code is working as it should .selected is being added to the labels on the diagram but there is no style linked to that class.

You need to add something like this to your stylesheet
.selected {
  background: red;
  color: white;
}

Open in new window

1
 

Author Closing Comment

by:SmashAndGrab
ID: 41872171
Brilliant!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41872289
:) - thank you.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now