AngularJS更新select上的内容

时间:2014-04-28 00:22:35

标签: json angularjs data-binding

我尝试根据select选项更新DIV的内容,但无法弄清楚如何更新它。我有代码HERE

数据位于两个不同的JSON对象中。因为只有一个JSON,我可以这样做,但有两个单独的JSON,如何更新我的内容?

我的HTML:

<div ng-controller="MyCtrl">
  <select ng-options="account as account.id for account in accountInfo " ng-model="accounts" ng-change="update(accounts)">
      <option value="">Select Account</option>
  </select>

 <!-- Before displaying the following, I need to apply a condition here as if(accountInfo).id == accounts.Id -->

    <div>        
        <div ng-repeat="d in accounts.description">{{d}}</div> <br />
        <div ng-repeat="ca in accounts.cashAvailable">{{ca}}</div> <br />
        <div ng-repeat="tv in accounts.totalValue">{{tv}}</div>
    </div>
</div>

MY JS

var myApp = angular.module('myApp',[]);



function MyCtrl($scope) {
$scope.accountInfo = [
{
    "id": "0",
    "accountName": "Account A"
},
{
    "id": "1",
    "accountName": "Account B"
},
{
    "id": "2",
    "accountName": "Account C"
}
];

  $scope.accounts = [
{
    "id": "0",
    "accountName": "Account 1",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 1",
            "Mellisa's IRA",
            "BR Demo 1",
            "BR Demo 2",
            "BR Demo 3"
    ],
    "cashAvailable": [
            "278,800.33A",
            "0.00",
            "574.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12A",
            "36,373.44",
            "574.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "1",
    "accountName": "Account 2",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 2",
            "Mellisa's IRA",
            "BR Demo 4",
            "BR Demo 5",
            "BR Demo 6"
    ],
    "cashAvailable": [
            "278,800.33B",
            "0.00",
            "575.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12B",
            "36,373.44",
            "575.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "2",
    "accountName": "Account 3",
    "principalAmount": "70.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 3",
            "Mellisa's IRA",
            "BR Demo 7",
            "BR Demo 8",
            "BR Demo 9"
    ],
    "cashAvailable": [
            "278,800.33C",
            "0.00",
            "576.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12C",
            "36,373.44",
            "576.78",
            "501,211.71",
            "2,228.92"
    ]
}

];
  $scope.update = function() {
//console.log($scope.item.code, $scope.item.name);
//alert("change");
  }
}

3 个答案:

答案 0 :(得分:0)

我更新了您的小提琴,您的更新例程正在标记中的accounts中传递,您可以在控制器中处理它,如下所示:

$scope.update = function(accounts) {
    // accounts is your selected item and you can what you need here
    alert(accounts.id);
}

updated fiddle

答案 1 :(得分:0)

好的,我解决了HERE

JS代码如下:

var myApp = angular.module('myApp',[]);



function MyCtrl($scope) {
$scope.accountInfo = [
{
    "id": "0",
    "accountName": "Account A"
},
{
    "id": "1",
    "accountName": "Account B"
},
{
    "id": "2",
    "accountName": "Account C"
}
];


  $scope.update = function(accounts) {
//console.log($scope.item.code, $scope.item.name);
//alert("change");
  $scope.acctountDetails = [
{
    "id": "0",
    "accountName": "Account 1",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 1",
            "Mellisa's IRA",
            "BR Demo 1",
            "BR Demo 2",
            "BR Demo 3"
    ],
    "cashAvailable": [
            "278,800.33A",
            "0.00",
            "574.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12A",
            "36,373.44",
            "574.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "1",
    "accountName": "Account 2",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 2222",
            "Mellisa's IRA",
            "BR Demo 4",
            "BR Demo 5",
            "BR Demo 6"
    ],
    "cashAvailable": [
            "278,800.33B",
            "0.00",
            "575.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12B",
            "36,373.44",
            "575.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "2",
    "accountName": "Account 3",
    "principalAmount": "70.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 3",
            "Mellisa's IRA",
            "BR Demo 7",
            "BR Demo 8",
            "BR Demo 9"
    ],
    "cashAvailable": [
            "278,800.33C",
            "0.00",
            "576.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12C",
            "36,373.44",
            "576.78",
            "501,211.71",
            "2,228.92"
    ]
}

];
  $scope.test = ""; //$scope.acctountDetails.length;
  for(var i=0; i<$scope.acctountDetails.length; i++) {
      if(accounts.id == $scope.acctountDetails[i].id) {
          $scope.test = $scope.acctountDetails[i].description;
       }
      }
  }
 }

答案 2 :(得分:0)

还有其他解决方法: $scope.d=$scope.accounts[account.id].description; $scope.ca=$scope.accounts[account.id].cashAvailable; $scope.tv=$scope.accounts[account.id].totalValue;

select update