在下拉列表中獲取與選定項目相關的屬性AngularJS

我正在用AngularJS構建一個使用ASP.NET Web API的應用程序，我對這些框架很陌生。我有一個顯示來自API的數據的下拉列表。當我從下拉列表中選擇一個元素時，我想獲得與其關聯的其他屬性。在下拉列表中獲取與選定項目相關的屬性AngularJS

這裏的API

[Route("CustomerRecords")] 
    public List<Customer> Get() 
    { 
     return new List<Customer>() 
     { 
      new Customer { CID=1, Name="Bruce Wayne", PIN="1234", Bal=1000000, cardStatus= 0 } 
      ,new Customer { CID=2, Name="Tony Stark", PIN="2246", Bal=900000, cardStatus= 0 } 
      ,new Customer { CID=3, Name="Jon Snow", PIN="2398", Bal=3000, cardStatus= 1 } 
      ,new Customer { CID=4, Name="Rustin Cohle", PIN="7549", Bal=450000, cardStatus= 2 } 
     }; 
    } 
} 

public class Customer 
{ 
    public int CID { get; set; } 
    public string Name { get; set; } 
    public string PIN { get; set; } 
    public int Bal { get; set; } 
    public int cardStatus { get; set; } 
}

這裏的模塊，服務和工廠方法

var customerAppModule = angular.module("customerApp", []); 

customerAppModule.controller('CustomerCtrl', function ($scope, CustomerService) 
{ 

    getCustomerRecords(); 

    function getCustomerRecords() { 
     CustomerService.getCustomers() 

      .success(function (data) { 
       console.log(data); 
       $scope.customers = data; 
      }) 

      .error(function (data, status) { 
       console.error('failure loading the customer record', status, data); 
       $scope.customers = {}; 
      }); 
    } 
}); 

customerAppModule.factory('CustomerService', ['$http', function ($http) { 
    var customerService = {}; 
    var urlBase = 'http://localhost:51701/Customer'; 

    customerService.getCustomers = function() { 
     return $http.get(urlBase + '/CustomerRecords'); 
    }; 

    return customerService; 
}]);

，這裏是我的下拉

<select ng-change="getCustomers(details)" ng-model="details"> 
      <option ng-repeat="customer in customers" value="{{customer.CID}}">{{customer.Name}}</option> 
     </select>

因此，只有名稱會出現在我的下拉列表中，但是如果我選擇一個特定的名字，我希望能夠獲得它的其他屬性

來源

2017-08-16 jo12345678

你的功能getCustomers控制器內部應該有所有的細節作爲參數，因爲你通過它，

$scope.getCustomers = function(details){ 
    //this has all the details associated with id (details); 
}

來源

2017-08-16 19:44:22 Sajeetharan

我需要檢索選定名稱的'cardStatus'以在ng-switch中使用。我仍然不明白如何獲取選定項目的屬性。如果答案顯而易見，請原諒我;不到一週前我剛剛開始使用這些框架。 – jo12345678

你可以訪問like details.cardStatus – Sajeetharan

@ jo12345678是否有幫助？ – Sajeetharan

使用select.js庫，並嘗試像下面

<ui-select ng-model="model" append-to-body="true"> 
           <ui-select-match> 
            <span ng-bind="$select.selected.name"></span> 
           </ui-select-match> 
           <ui-select-choices repeat="item in modelList" > 
            <div ng-bind="item.name" ng-click="selectValue(item)"></div> 
           </ui-select-choices> 
          </ui-select>

來源

2017-08-17 07:24:36

在下拉列表中獲取與選定項目相關的屬性AngularJS

回答

相關問題