web-dev-qa-db-ja.com

AngularjsドロップダウンOnSelected Text and Value

AngularJSが初めてで、Dropdownから選択したテキストと値を取得しようとしています。私はまだそこに到達することはできませんでしたが、多くのチュートリアルに従いました。 SelectedValueとSelectedTextは常にundefinedです。以下は私のコードです：

Html：

<div ng-app="SelectApp">
<div ng-controller="selectController">
    <select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)">
        <option value="0">Select a category...</option>
        <option ng-repeat="category in categories" value="{{category.id}}"
             ng-disabled="category.disabled" ng-class="{'mainCategory' : category.disabled}">
             {{category.name}}
        </option>
     </select>
</div>

Js：

'use strict';
var app = angular.module('SelectApp', [ ]);
app.controller('selectController', ['$scope', '$window', function ($scope, $window) {

$scope.categories = [       
   { id: 1, name: "- Vehicles -", disabled: true },
   { id: 2, name: "Cars" },
   { id: 3, name: "Commercial vehicles", disabled: false },
   { id: 4, name: "Motorcycles", disabled: false },
   { id: 5, name: "Car & Motorcycle Equipment", disabled: false },
   { id: 6, name: "Boats", disabled: false },
   { id: 7, name: "Other Vehicles", disabled: false },
   { id: 8, name: "- House and Children -", disabled: true },
   { id: 9, name: "Appliances", disabled: false },
   { id: 10, name: "Inside", disabled: false },
   { id: 11, name: "Games and Clothing", disabled: false },
   { id: 12, name: "Garden", disabled: false }
];

$scope.onCategoryChange = function () {

    $window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);

};
}]);

そしてもう1つ、最初のアイテムをSelect a category... thenドロップダウンの最初のアイテムが常に空である理由。

以下は私のフィドルのサンプルです。 http://jsfiddle.net/Qgmz7/136/

javascriptjqueryhtmlangularjsangularjs-ng-options
6
Usman Khalid

これは、モデルitemSelectedが、value要素のoption属性以外の選択ドロップダウンの現在の値をキャプチャするためです。あなたが持っている

<option ng-repeat="category in categories" value="{{category.id}}">

あなたのコードで、レンダリングされたバージョンでは、

<option ng-repeat="category in categories" value="0">

ただし、itemSelectedがカテゴリオブジェクトであり、idまたは他のプロパティを照会しようとすると、undefinedが返されます。

ng-optionsをgroup byとともに使用し、データを少し変更するか、通常のng-repeatを使用してselectedIndexを取得し、そのインデックスを使用してカテゴリリストからカテゴリオブジェクトを検索できます。ここで最初のアプローチを紹介します。

[〜＃〜] html [〜＃〜]

<select name="category-group" id="categoryGroup" 
        ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)" 
        ng-options="category.name group by category.group for category in categories">
</select>

更新されたデータ

$scope.categories = [
       { id: 0, name: "Select a category..."},
       { id: 1, name: "Cars", group : "- Vehicles -" },
       { id: 2, name: "Commercial vehicles", group : "- Vehicles -" },
       { id: 3, name: "Motorcycles", group : "- Vehicles -" }
 ];

 $scope.itemSelected = $scope.categories[0];

無効なプロパティの代わりに、group byで使用できるgroupプロパティを追加できます。

アイデアを説明するために、更新された Fiddle を示します。

10
Arkantos

オプションの選択の変更時に、ng-optionsを使用してオブジェクトをng-model値に設定する必要があります。

マークアップ

<select name="category-group" id="categoryGroup" class="form-control" 
  ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)" 
  ng-options="category.name for category in categories">
    <option value="0">Select a category...</option>
</select>

ここでフィドル

更新

スタイルを永続化するには、ng-repeatを使用する必要があります。その場合、ng-modelにバインドされるのはidのみであり、オブジェクト全体を取得する間、データをフィルタリングする必要があります。

$scope.onCategoryChange = function () {
    var currentSelected = $filter('filter')($scope.categories, {id: $scope.itemSelected})[0]
    $window.alert("Selected Value: " + currentSelected.id + "\nSelected Text: " + currentSelected.name);
};

更新されたフィドル

7
Pankaj Parkar
<div ng-app="SelectApp">
    <div ng-controller="selectController">
    <select ng-change='onCategoryChange()' ng-model="itemSelected" ng-options="category.name for category in categories">
        <option value="">-- category --</option>
    </select>
</div>

// http://jsbin.com/zajipe/edit?html,js,output

3
Jean Troiani

onCategoryChange()の小さな変更が機能するはずです：

$scope.onCategoryChange = function () {
        $window.alert("Selected Value: " + $scope.categories[$scope.itemSelected - 1].id + "\nSelected Text: " + $scope.categories[$scope.itemSelected -1].name);

    };

JSFiddle： http://jsfiddle.net/Qgmz7/144/

3
ArBro

ngChangeは選択したオプションの値のみを返すため、データ全体を取得することはできません。

マークアップロジックを変更しない実用的なソリューションを次に示します。

マークアップ：

<select
    name="category-group"
    id="categoryGroup"
    class="form-control"
    ng-model="id"     
    ng-change="onCategoryChange(id)">

ngChangeハンドラ：

 $scope.onCategoryChange = function (id) {
        //get selected item data from categories
        var selectedIndex = $scope.categories.map(function(obj) { return obj.id; }).indexOf( parseInt(id) );
        var itemSelected = $scope.categories[selectedIndex];

        $window.alert("Selected Value: " + itemSelected.id + "\nSelected Text: " + itemSelected.name);

    };

別の解決策（少し汚い）は、オプションのvalueのみを次のように変更することです。

<option .... value="{{category.id}}|{{category.name}}">

...そして実際のngChangeハンドラー内で、値を分割してすべての値を配列として取得します。

$scope.onCategoryChange = function (itemSelected) {
    $scope.itemSelected = itemSelected.split('|'); //string value to array
    $window.alert("Selected Value: " + $scope.itemSelected[0] + "\nSelected Text: " + $scope.itemSelected[1]);

};
1
tbutcaru

ここで非常にシンプルで簡単なコード

<div ng-app="myApp" ng-controller="myCtrl">
Select Person: 
<select ng-model="selectedData">
   <option ng-repeat="person in persons" value={{person.age}}>
         {{person.name}}
   </option>
</select>
<div ng-bind="selectedData">AGE:</DIV>
<br>
</div>


    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',myCtrlFn);
    function myCtrlFn($scope) {

    $scope.persons =[
        {'name': 'Prabu','age': 20},
        {'name': 'Ram','age': 24},
        {'name': 'S','age': 14},
        {'name': 'P','age': 15}
        ];
    }
    </script>
0
Praburam S