如何将选定值从UI存储到控制器中的数组？

Question

我正在尝试检索angularjs控制器中每个主题的成绩列表，以将其传递给我的REST API。我使用一串逗号分隔的等级来测试代码并且它运行良好，现在我正在寻找从用户动态获得的等级。目前我只在我的API中接受逗号分隔的成绩。我如何迭代生成所有具有成绩选项的主题列表？＃/ p>

    $http.jsonp("http://localhost/api/cgpa/"+ "a1,a2,e1,c2,e1,c1" +"?callback=JSON_CALLBACK") // callback is necessary for jsonp to initiate .sucess function
    .success(function(data, status, headers, config) {
        $scope.data = 'Your CGPA is ' + data.cgpa;
    })
    .error(function(){
        $scope.data = 'Error';
    });

另外请建议我如果我可以通过angularjs实现这种功能，通过＆＃34;添加主题＆＃34;添加主题＃34;按钮？

Answer 1

你有几个选择：

1）使用ng-repeat中的函数注册“clicked”元素：

app.controller('AppCtrl', ['$scope', 'yourService', function($scope, yourService){ 
  $scope.selected = [];

  yourService.fetch(function(items){
    $scope.items = items;
  });

  $scope.select = function(item){
    var index;
    if ((index = $scope.selected.indexOf(item)) !== -1){
      $scope.selected.splice(index, 1); // remove already existing, aka toggle
    } else {
      $scope.selected.push(item);
    }
  }

  $scope.isSelected = function(item){
     return $scope.selected.indexOf(item) > -1;
  }

  $scope.calculate = function(){
    var items = [];
    for(var i = 0, len = $scope.selected.length; i < len; i++){
      items.push($scope.selected[i].value);
    }
    yourService.jsonp(items.join(','));
  }
});

<div ng-repeat="item in items">
  <div ng-click="select(item)" ng-class="{'isSelected':isSelected(item)}">{{ your item data }}</div>
</div>

2）在每件商品上加上“状态”

app.controller('AppCtrl', ['$scope', 'yourService', function($scope, yourService){ 
  yourService.fetch(function(items){
    for(var i = 0, len = items.length; i < len; i++){
      items[i].selected = false;
    }
    $scope.items = items;
  });

  $scope.calculate = function(){
    var items = [];
    for(var i = 0, len = $scope.items.length; i < len; i++){
      if ($scope.items[i].selected) {
        items.push($scope.items[i].value); // this could be done with .reduce or .map, but it's not cross-browser 
      }
    }
    yourService.jsonp(items.join(','));
  }
});

<div ng-repeat="item in items">
  <div ng-click="item.selected=!item.selected" ng-class="{'isSelected':item.selected}">{{ your item data }}</div>
</div>

3）您可以（并且应该）将所有选择/取消选择/提交数据集中在您的服务中，而不是将其全部放在您的控制器范围内，这样您就可以重用代码并且通常是良好的实践

4）另一种方法是为每个按钮创建一个独立的范围指令，但我认为这对你想要完成的事情来说太过分了

基本上，您的用户界面将始终反映您的数据，而不是反过来。