2013-08-20 15 views
13

Veritabanından doğrudan doğruya 2 damla doldurabiliyorum. Benim sorunum, ilk açılan seçime göre 2. açılan değerlerin doldurulması gerekiyor. Angular'a yeni olduğum için, bunu anlayamıyorum, birisi bana bu konuda yardımcı olabilir.Açılır Pencereye 2 Göz Atmayı Açma 1 seçimine göre

<select id="OfficeId" name="OfficeId" ng-model="item.OfficeId" 
     ng-options="item.OfficeId as item.OfficeName for item in Offices"> 
    <option value="" selected>Select the Office</option> 
</select> 
<select id="OBJ" name="OBJ" ng-model="item.OfficeOBJId" 
     ng-options="item.OfficeOBJId as item.OBJId for item in Codes"> 
    <option value="" selected>Select OBJ Code</option> 
</select> 

myApp.factory('OfficeNames', function ($resource) { 
    return $resource(
     'api/Office/:id', 
     { id: '@id' }, 
     { update: { method: 'PUT' } } 
    ); 
});  

myApp.factory('OfficeObjCode', function ($resource) { 
    return $resource(
     'api/OfficeObj/:id', 
     { id: '@id' }, 
     { update: { method: 'PUT' } } 
    ); 
}); 

function OfficeCtrl($scope, $location, OfficeNames) { 
    $scope.Offices = OfficeNames.query(); 
} 

function OfficeObjCtrl($scope, $location, OfficeObjCode) { 
    $scope.Codes = OfficeObjCode.query(); 
} 

Not: Muhtemelen sorunlardan biridir aslında, Bunu için 2 denetleyicileri gerekmez Web API/Eğik/Petapoco/SQL Server

+3

Hoşgeldin SO için! Size daha iyi yardım etmemize yardımcı olmak için sipariş verdim, zaten sahip olduğunuz ilgili kodu postalamanızı öneririz. – Brian

cevap

11

kullanıyorum. Aynı kapsamda olduklarında, bunları kolayca birleştirebilirsiniz. İkinci seçeneği doldurmak için değerleri alan bir işlevi tetiklemek için ilk seçenekte ng-change kullanın.

Örnek Fiddle: Ayrıca http://jsfiddle.net/TheSharpieOne/Xku9z/

, sadece doldurulmadan bu zaman ikinci seçmek göstermek için ikinci seçenekleri seçin dizisi uzunluğuna sahip ng-show kullanabilirsiniz.

Örnek Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/1/

+0

Harika örnekler. – spsaucier

+0

Örneğinizi http.get çağrısı yapan bir devlet seçtikten ve bu Json biçimini kullandıktan sonra şehirleri doldurmak için nasıl uyarlayabilirim: '$ scope.states = [{" id ": '1'," name ": 'Michigan'," şehirler ": [{'id': '1', 'name': 'Detroit'}, {'id': '2', 'name': 'Flint'}]}]; –

+0

Sen isteyeceksin devletlerin bir listesini ve her eyalet için bir şehirler listesi (esasen 50 şehir listeleri, eyalet başına 1 liste). Durum seçildikten sonra, o değer için şehirlerin listesini almak için bu değeri "$ http.get" aramasında kullanırdınız. Ardından o listeyi kapsam içine al. Aynı zamanda şehirleri içeren tek bir devletler listesi kullanarak, devletlere sahip olduğunuzdan, alıntıları almanıza gerek kalmayacaktı. – TheSharpieOne

2

şöyle yapın: Sadece, ofis kontrolörü tek kontrol gerekir javascript ile

<select id="OfficeId" name="OfficeId" ng-model="item.OfficeId" 
    ng-options="item.OfficeId as item.OfficeName for item in Offices" ng-change="updateObjects(item.OfficeId)"> 
<option value="" selected>Select the Office</option> 

<select id="OBJ" name="OBJ" ng-model="item.OfficeOBJId" 
    ng-options="item.OfficeOBJId as item.OBJId for item in Codes"> 
<option value="" selected>Select OBJ Code</option> 

:

angular.module('myApp',[]) 
.controller('OfficeCtrl', 
['$scope','$location','OfficeNames','OfficeObjCode',function($scope, 
$location, OfficeNames,OfficeObjCode) 
{ 
$scope.Offices=OfficeNames.query(); 

$scope.updateObjects =function(office_id) 
{`// take {{office_id}} to server to pick codes based 
    //on that office id and 
    // then assign them to $scope.codes..` 

$scope.Codes = 'what you came back with'; 
} 

}).factory('OfficeNames', function ($resource) { 
return $resource(
    'api/Office/:id', 
    { id: '@id' }, 
    { update: { method: 'PUT' } } 
); 
}).factory('OfficeObjCode', function ($resource) { 
return $resource(
    'api/OfficeObj/:id', 
    { id: '@id' }, 
    { update: { method: 'PUT' } } 
); 
}); 
2

ben Umarım yardımcı olur :)

Kontrolör kodu aşağıdaki gibi uygulanmaktadır

var app = angular.module("app",[]); 
app.controller("ctrl",function($scope){ 
    $scope.key_options = [ 
    {table:"Table_1",key:"age_flg",key_label:"Age"}, 
    {table:"Table_1",key:"ethnicity_flg",key_label:"Ethnicity"}, 
    {table:"Table_2",tab_label:"Table 2",key:"green_flg",key_label:"Green Flag"}, 
    {table:"Table_2",tab_label:"Table 2",key:"life_flg",key_label:"Life Flag"} 
    ]; 
    $scope.options = [ 
    {table:"Table_1",tab_label:"Table 1"}, 
    {table:"Table_2",tab_label:"Table 2"} 
    ]; 

$scope.sel = function(){ 
    if($scope.key_attr){ 
    console.log($scope.sel_attr['table']); 
    console.log($scope.key_attr['key']); 
}; 
} 
}); 

html kodu:

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<meta charset="utf-8"> 
<script src="angular.min.js"></script> 
<script src="app.js"></script> 
</head> 
<body ng-controller="ctrl"> 
<select ng-model="sel_attr" ng-init="sel_attr = options[0]" ng-options="attr['tab_label'] for attr in options"></select> 
<select ng-model="key_attr" ng-init="key_attr = key_options[0]" ng-options="attr['key_label'] for attr in key_options |filter: {table: sel_attr['table']}" ng-change="sel()"></select> 
</body> 
</html> 
İlgili konular