將對象陣列綁定到AngularJs中SELECT的選項值

我有一個對象散列，並且這個散列的ID綁定到一個RADIO BUTTON。當用戶選擇這個收音機時，我需要使用基於此型號屬性的選項填充選擇標籤。它很難解釋，所以我創建了一個Codepen來顯示我想要的： http://codepen.io/rizidoro/pen/BeJjf 將對象陣列綁定到AngularJs中SELECT的選項值

在此先感謝！

來源

2013-02-28 rizidoro

你爲什麼對我大喊：'（ – jbabey 2013-02-28 18:39:47

這裏有一個codepen demo動態綁定到一個單一的SELECT元素，選擇更改工作NG-模型綁定：

HTML：

<div ng-controller="TestCtrl"> 
    <ul> 
    <li ng-repeat="attr in data"> 
     <input type="radio" name='data-attr' value='{{attr.id}}' ng-model="selected.id" />{{attr.name}} 
    </li> 
    </ul> 

    <select ng-model="selected.value" ng-options="item.name for item in selectedAttr.values "></select> 
</div>

JS：

function TestCtrl($scope) { 
    $scope.selected = {}; 

    $scope.data = [ 
    {"id":"113000", 
     "name":"Size", 
     "values": 
      [{"id":"92029","name":"Size A"}, 
      {"id":"92030","name":"Size B"}] 
    }, 
    {"id":"113002", 
     "name":"Color", 
     "values": 
      [{"id":"94029","name":"Blue"}, 
      {"id":"94030","name":"Black"}] 
    } 
    ]; 

    $scope.$watch('selected.id', function(id){ 
    delete $scope.selected.value; 
    angular.forEach($scope.data, function(attr){ 
     if(attr.id === id){ 
     $scope.selectedAttr = attr; 
     } 
    }); 
    }); 
}

來源

2013-03-01 07:31:00 Stewie

Tks @ stewie ...它的工作原理！關於$ watch，我無法在文檔中找到它... – rizidoro 2013-03-03 23:26:15

$ watch docs在範圍頁面中：http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch – Stewie 2013-03-04 00:29:36

http://jsfiddle.net/wagedomain/afuz5/

我改寫了你的HTML一點 - 不使用UL /李標籤，其中一個div或跨度就足夠了。使它更容易。

基本上，NG-重複裏面，你可以這樣做：

<div ng-repeat="attr in data"> 
     <input type='radio' name='data-attr' value='{{attr.id}}' />{{attr.name}} 
     <select ng-model="selected" ng-options="item.name for item in attr.values "></select> 
</div>

這是NG的選項，使這項工作。我還添加了一個$ scope.selected變量來模型綁定，但我沒有在小提琴上做任何事情。根據需要使用。

來源

2013-02-28 19:05:04

嗨，詹姆斯，差不多是......但我不想爲每種類型選擇一個。這將是唯一的選擇，並將基於無線電價值填充...你明白了嗎？ – rizidoro 2013-02-28 19:27:59

我已經創建了一個小提琴，這可能會解決你的問題。 http://jsfiddle.net/qY2Zz/。

將數據分離爲服務。

animateAppModule.service('data', function(){...})
分配模型的選擇框。

ng-model="$scope.selectedOption"

來源

2013-03-01 02:08:38 rajkamal

將對象陣列綁定到AngularJs中SELECT的選項值

回答

相關問題