Question

我是一位经验丰富的C＃/ ASP.NET开发人员，我的公司正在推动AngularJS进行所有未来的Web前端开发。

我有一个特定的情况，我无法弄明白。我有一个SELECT绑定到一个“电子邮件”对象数组（具有属性“id”和“名称”），我使用ng-options而不是ng-repeat来进行数据绑定。这会为我填充SELECT，所以我想要做的是从列表中选择一个项目，单击一个按钮，然后从列表中删除该项目并将其添加到辅助列表。我原本打算使用复选框，但数组中有大量项目，我的项目经理不喜欢这样。

我使用它作为所有可用数组函数的引用： http://www.w3schools.com/jsref/jsref_obj_array.asp

由于我已经习惯了C＃，我在JavaScript中没有相同的方法，而且我很难找到合适的技术来做到这一点。识别源数组中的项目，删除它，并将其插入目标数组，同时保持按字母顺序按“名称”排序的最佳方法是什么？

这引出了第二个问题。我不知道我是否有效地绑定了我的SELECT，因为当我选择一个项目并单击按钮时，ng-model属性与项目的“id”相关联，然后用于扫描数组SELECT是得到该物品。由于我对AngularJS相当新，并且他们的文档不太理想，我想知道是否可以绑定到对象而不是它的“id”然后直接访问所选项而不必扫描数组。这是我当前的代码，它绑定到“id”：

JS：

$scope.addEmailToGroup = function(emailID) {
  var email = getEmailByID($scope.emails, emailID);

  if (email !== null) {
    // TODO: Move item from one array to the other
  }
};

function getEmailByID(arr, id) {
  var email = null;
  var length = arr.length;

  for (var i = 0; i < length; i++) {
    if (arr[i].id === id) {
      email = angular.copy(arr[i]);
      break;
    }
  }

  return email;
}

HTML：

<select id="emails" class="form-control" data-ng-model="selectedEmailID" name="emails" data-ng-options="email.id as email.name  for email in emails"></select>
<button class="btn btn-default" data-ng-click="addEmailToGroup(selectedEmailID)" type="button">
  <span class="glyphicon glyphicon-plus"></span>
</button>

Answer 1

假设您的电子邮件ID是数字，您可以将ID用作数组索引，只需访问它们，如：

$scope.emails[emailID];

如果开销太大，您可以使用字典数组将$scope.emails ID映射到其数组键。

这是我使用字典的意思。请注意，现在您不必循环emails数组中的所有对象，但您只需在字典变量上使用indexOf即可获取完整的电子邮件对象。在您的应用中，您只需循环一次电子邮件，即可构建字典。

＆＃13;

var emails = [ // dummy emails object
  {id: 3,  email: 'shomz@example.com'},
  {id: 5,  email: 'DesertFoxAZ@example.com'},
  {id: 12, email: 'SomeoneElse@example.com'}
];

var dict = []; // init the dictionary here

for(var i = 0; i < emails.length; i++){ // build the dictionary
  dict.push(emails[i].id);
}

function getEmailById(id){
  return emails[dict.indexOf(parseInt(id, 10))];
}


document.getElementById('b').addEventListener('click', function(){
  var id = document.getElementById('n').value;
  document.getElementById('res').textContent = 
    JSON.stringify(getEmailById(id)) || "Not found";
});

＆＃13;

<input type="number" id="n" placeholder="Enter email ID">
<button id="b">Get Email</button>
<p id="res">Enter email ID in the box above, then click the button</p>

＆＃13;

Answer 2

我想出了一个混合解决方案。首先，我能够将SELECT绑定到对象本身，并且删除了搜索数组的需要。

<select id="emails" class="form-control" data-ng-model="selectedEmail" name="emails" data-ng-options="email.name for email in emails track by email.id">
</select>
<button class="btn btn-default" data-ng-click="addEmailToGroup()" type="button">
    <span class="glyphicon glyphicon-plus"></span>
</button>

至于将项目从一个数组移动到另一个数组，我使用了这段代码：

$scope.addEmailToGroup = function () {
    if ($scope.selectedEmail) {
        var pos = -1;
        var length = $scope.emails.length;

        for (var i = 0; i < length; i++) {
            if ($scope.emails[i].id === $scope.selectedEmail.id) {
                pos = i;
                break;
            }
        }

        $scope.emails.splice(pos, 1);
        $scope.selectedEmails.push($scope.selectedEmail);
    }
};

虽然我当然可以使用@Shomz提出的解决方案以及@charlietfl建议的解决方案，但我认为这可以满足我的需求。

感谢您的反馈。

哦，抱歉上面的剪辑不起作用。这是我在StackOverflow上的第一篇文章...

在AngularJS中将项目从一个数组移动到另一个数组

2 个答案: