AngularJSラベルと値を選択から取得する方法

ウェブAPIを介して入力されるドロップダウン（選択）があります。ウェブAPIの戻り値は、以下の構造を有する：AngularJSラベルと値を選択から取得する方法

{ 
    "Id": 1, 
    "Description": "A description" 
}

何が必要なのですが、私は私がデ対応するラベル（またはテキスト）と値を持つようにしたいオプションを選択したとき。これは私が持っているものです：オブジェクト全体だけではなく、それのIDを選択するために

(function (app) { 
    var requestCtrl = function ($scope, $http, requestTypeService) { 

    $scope.requestRows = []; 

    $scope.selectChange = function() { 
     $scope.RequestTypeID = $scope.requestTypeList.value; 
     $scope.RequestTypeDescription = $scope.requestTypeList.label; 
    } 

    requestTypeService.getAll().success(function (data) { 
     $scope.requestTypes = data; 
    }); 


    $scope.addRequest = function() { 

     var requestRow = { 
      RequestTypeID: $scope.RequestTypeID, // Here I need the selected value 
      RequestTypeDescription: $scope.RequestTypeDescription, // Here I need the selected Description 
      EventColor: $scope.EventColor 
     }; 

     $scope.requestRows.push(requestRow); 
    }; 

    $scope.removePlanboardRequest = function (index) { 
     $scope.planboardRequests.splice(index, 1); 
    }; 
}; 

app.controller("PlanboardRequestCtrl", planboardRequestCtrl); 
}(angular.module("planboardApp")));

出典

2016-07-08 kwv84

設定ng-options：

<select class="form-control" ng-model="requestTypeList" 
    ng-change="selectChange" 
    ng-options="requestType.Id as requestType.Description for requestType 
    in requestTypes"> 
</select> 

<input type="text" ng-model="RequestTypeID" /><br/> 
<input type="text" ng-model="RequestTypeDescription" />

私のコントローラは、このようになります。

はまた、「あなたが本当にwouldn NG-オプションを設定することによりJS

$scope.selectChange = function() { 
    $scope.RequestTypeID = $scope.requestTypeList.Id; 
    $scope.RequestTypeDescription = $scope.requestTypeList.Description; 
}

selectChange()

<select class="form-control" ng-model="requestTypeList" 
    ng-change="selectChange()" 
    ng-options="requestType as requestType.Description for requestType 
    in requestTypes"> 
</select>

にng-change

修正無効labelとvalueプロパティで()が不足してオブジェクト全体を選択するように修正しますのような個別の変数を使用する必要があるビューまたは$httpのために必要なすべて以来、とRequestTypeDescriptionあなたはobject代わりのidを受信するng-optionsのng-modelを設定する必要がrequestTypeList

出典

2016-07-08 22:04:58 charlietfl

まずに既にあります。

はまた、あなたの原因で、私はng-changeディレクティブを使用するには何の必要がありませんと思います次のように、あなただけで設定することができますngのモデルは、入力に属性：

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
     $scope.requestTypes = [ 
 
     { 
 
      "Id":1, 
 
      "Description":"First description" 
 
     }, 
 
     { 
 
      "Id":2, 
 
      "Description":"Second description" 
 
     }, 
 
     { 
 
      "Id":3, 
 
      "Description":"Third description" 
 
     } 
 
     ]; 
 
    }); 
 
})();

<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    Requesters: <select class="form-control" ng-model="requestTypeList" ng-options="requestType as requestType.Description for requestType in requestTypes"> 
 
    </select> 
 
    <hr> 
 
    <label for="requestId">Id: </label> 
 
    <input type="text" id="requestId" ng-model="requestTypeList.Id"> 
 
    <br> 
 
    <label for="requestDesc">Description: </label> 
 
    <input type="text" id="requestDesc" ng-model="requestTypeList.Description"> 
 
</body> 
 

 
</html>

出典

2016-07-08 22:14:04 developer033

AngularJSラベルと値を選択から取得する方法

答えて

関連する問題