angleJSコントローラでオプションを選択してテキストを入力しました

Question

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

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); 
}; 

Answer 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>

Answer 2

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

Answer 3

で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>