Solved

Two TextBox and a Button AngularjS

Posted on 2014-09-19
2
1,732 Views
Last Modified: 2014-09-19
I have two textboxes one is Snumber and another dNumber and one FIND button. What I want is if I am entering sNumber, then button click goes to a page and if I enter dNumber then button click go to another page. How can this be done in AngularJS?

             
                 <div class="form-group">
                                 <label class="control-label">S Number</label>
                                 <div class="form-group">
                                    <input type="text" class="form-control"  data-ng-model="sNumber" >
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label class="control-label">D Number</label>
                                 <div class="orm form-group">
                                    <input type="text" class="form-control" data-ng-model="dNumber" data-ng-maxlength=20 data-ng-minlength=5  required>
                                 </div>
                              </div>
                           </div>
                        </form>
                        <div class="form-actions">
                           <a data-ng-href="#/sDetailsList/{{sNumber}}" class="btn btn-lg green" >Find Data(s)</a>
			   <a data-ng-href="#/dDeatilsList/{{dNumber}}" class="btn btn-lg green" >Find Data(s)</a>
			</div>

Open in new window

0
Comment
Question by:rbhargaw
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40333660
hope that help : http://jsfiddle.net/2m3o6tsc/

Using : ng-hide="!dNumber||sNumber.length" and ng-hide="!sNumber||dNumber.length"

<div ng-app="myApp" ng-controller="myCtrl">
    <form>
        <div>
            <div class="form-group">
                <label class="control-label">S Number</label>
                    <div class="form-group">
                        <input type="text" class="form-control"  data-ng-model="sNumber" ng-disabled="dNumber.length" />
                    </div>
            </div>
            <div class="form-group">
                <label class="control-label">D Number</label>
                <div class="orm form-group">
                    <input type="text" class="form-control" data-ng-model="dNumber" data-ng-maxlength=20 data-ng-minlength=5 ng-disabled="sNumber.length"  required />
                </div>
            </div>
        </div>
    </form>
    <div class="form-actions">
        <a data-ng-href="#/sDetailsList/{{sNumber}}" class="btn btn-lg green" ng-hide="!sNumber||dNumber.length" >Find Data(s)</a>
        <a data-ng-href="#/dDeatilsList/{{dNumber}}" class="btn btn-lg green" ng-hide="!dNumber||sNumber.length" >Find Data(s)</a>
    </div>
</div>

Open in new window

0
 

Author Comment

by:rbhargaw
ID: 40333713
That's exactly what I needed! Thanks!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to dynamically set the form action using jQuery.

758 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

19 Experts available now in Live!

Get 1:1 Help Now