基于下拉选择的AngularJs复杂模型

Question

Not having a lot of experience with complex angular js models, i'd like to ask for your advice or help. Please look at the following picture. It shows what I'm trying to accomplish.

I need to store the number of patients for a center for each year in the drop down. When I select another year, the input fields should be blank (or populated with data from DB). When I switch back to 2012, the input data should still be present. The data should be submitted only when the button is pressed.

I have a hard time figuring out how the model and data binding should look like. Any ideas are appreciated.

Answer 1

Hopefully this try may be a idea for you. Please have a look for it.

Plunker: http://plnkr.co/edit/ndRk1Uaoe0DkRhFSsGUh?p=preview

Code:

$scope.qty = 1;
$scope.cost = 2;
$scope.inCurr = 'EUR';
$scope.currencies = ['USD', 'EUR', 'CNY'];
$scope.usdRates = [
 { quantity:0,cost:0}];

 $scope.change = function() {

  if($scope.usdToForeignRates === 'USD')
  {
   $scope.usdRates[0].quantity = 25;
   $scope.usdRates[0].cost = 30;
   $scope.qty =$scope.usdRates[0].quantity;
   $scope.cost = $scope.usdRates[0].cost;
   }
       if($scope.usdToForeignRates === 'EUR')
  {
   $scope.usdRates[0].quantity = 45;
    $scope.usdRates[0].cost = 40;
   $scope.qty =$scope.usdRates[0].quantity;
   $scope.cost = $scope.usdRates[0].cost;
   }
  if($scope.usdToForeignRates === 'CNY')
  {
   $scope.usdRates[0].quantity = 55;
    $scope.usdRates[0].cost = 50;
   $scope.qty =$scope.usdRates[0].quantity;
   $scope.cost = $scope.usdRates[0].cost;
   }
  };

}]);