AngularJS在选择时更新内容

Question

我试图根据选择选项更新DIV的内容，但无法弄清楚如何更新它。 我这里有代码。

数据位于两个不同的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>

我的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");
  }
}

Answer 1

我更新了小提琴，您的更新例程正在标记中的accounts中传递，您可以像这样在控制器中处理它：

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

更新的小提琴

Answer 2

好，我在这里解决了

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;
       }
      }
  }
 }

Answer 3

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

选择更新