Link to home
Start Free TrialLog in
Avatar of SmashAndGrab
SmashAndGrab

asked on

Angular JS question

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?

User generated 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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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
Avatar of SmashAndGrab
SmashAndGrab

ASKER

That is AWESOME - exactly what I want!
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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

Avatar of SmashAndGrab
SmashAndGrab

ASKER

I hope I have made sense  :)  if not, please ask.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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.
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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!
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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.
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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.

User generated image
I just wanted your code to work with my app - thats all.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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.
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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)
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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.
Avatar of SmashAndGrab
SmashAndGrab

ASKER

Thanks.

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

ASKER

Effecttivley just adding some emphasis when the user clicks the checkboxes
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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
Avatar of SmashAndGrab
SmashAndGrab

ASKER

Hi Julian - did this makes sense?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Hi Julian - did this makes sense?
Not sure what "this" is ...:)
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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!)
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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.
Avatar of SmashAndGrab
SmashAndGrab

ASKER

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?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
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

Avatar of SmashAndGrab
SmashAndGrab

ASKER

Brilliant!
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
:) - thank you.