CODEWITHSUNDEEP
angularjs
Sau_Patil
Sau_Patil

Reputation: 358

concat selected option and input text in angularJS controller

I am working with an AngularJS application. I am trying to access selected option from dropdown and input text in controller. Where I am not able to get access selected option in controller and also i want to concatenate selected option with input text.

HTML

<select ng-model="countSelector" 
        ng-change="changeCount('{{countSelector}}')"
        ng-options="country.name for country in countries">
</select>
<input  type="text" 
        placeholder="Mobile Number"
        ng-model="MobileNumber"/>
<button class="button button-block button-balanced"
        ng-click="signUp(MobileNumber , countSelector)">
            Verify
</button>

Controller

$scope.countries = [ {
    name: "India",
    dial_code: "+91",
    code: "IN"
}, {
    name: "Israel",
    dial_code: "+972",
    code: "IL"
}, {
    name: "Afghanistan",
    dial_code: "+93",
    code: "AF"
}, {
    name: "Albania",
    dial_code: "+355",
    code: "AL"
}, {
    name: "Algeria",
    dial_code: "+213",
    code: "DZ"
}, {
    name: "AmericanSamoa",
    dial_code: "+1 684",
    code: "AS"
}]

$scope.signUp = function(MobileNumber, countSelector){ 
    var Mobile = MobileNumber;
    console.log(Mobile);
    var code = countSelector;
    console.log(countSelector);
};

Upvotes: 0

Views: 242

Answers (3)

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Try this snippet.

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  
$scope.countries = [ {
    name: "India",
    dial_code: "+91",
    code: "IN"
}, {
    name: "Israel",
    dial_code: "+972",
    code: "IL"
}, {
    name: "Afghanistan",
    dial_code: "+93",
    code: "AF"
}, {
    name: "Albania",
    dial_code: "+355",
    code: "AL"
}, {
    name: "Algeria",
    dial_code: "+213",
    code: "DZ"
}, {
    name: "AmericanSamoa",
    dial_code: "+1 684",
    code: "AS"
}]

$scope.signUp = function(MobileNumber, countSelector){ 
    var code = countSelector;
    console.log(countSelector);
    var Mobile = MobileNumber;
    console.log(countSelector.dial_code + Mobile);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="GreetingController">
<select ng-model="countSelector" 
        ng-change="changeCount('{{countSelector}}')"
        ng-options="country.name for country in countries">
</select>
<input  type="text" 
        placeholder="Mobile Number"
        ng-model="MobileNumber"/>
<button class="button button-block button-balanced"
        ng-click="signUp(MobileNumber , countSelector)">
            Verify
</button>
  </div>
</div>

Upvotes: 1

Amay Kulkarni
Amay Kulkarni

Reputation: 838

to access the country name try like this(since it is a object):

<select ng-model="countSelector" 
    ng-change="changeCount('{{countSelector}}')"
    ng-options="country.name for country in countries">
</select>
<input  type="text" 
    placeholder="Mobile Number"
    ng-model="MobileNumber"/>
<button class="button button-block button-balanced"
    ng-click="signUp(MobileNumber , countSelector.name)">
        Verify
</button>
<div>{{countSelector.name}}-{{MobileNumber}}</div>

Upvotes: 0

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1075

you can access selected option via ng-model="countSelector" so just use $scope.countSelector then you could concat with $scope.MobileNumber

Upvotes: 0

Related Questions