2016-08-17 6 views
0

私はAngularJSアプリケーションを使用しています。ドロップダウンから選択したオプションにアクセスしようとしていて、コントローラにテキストを入力しようとしています。どこで私はコントローラで選択されたオプションをアクセスすることができないと私はまた、入力テキストと選択したオプションを連結したい。angleJSコントローラでオプションを選択してテキストを入力しました

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> 

コントローラ

$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); 
}; 
+0

あなたjsfiddleを提供 –

答えて

1

このスニペットを試してください。

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>

0

あなただけ$scope.countSelectorを使用するので、あなたは国の名前は、(このようにしてみてくださいへのアクセスに$scope.MobileNumber

0

でCONCATできng-model="countSelector"介して選択されたオプションにアクセスすることができますオブジェクトなので):

<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> 
関連する問題