AngularJSのある配列から別の配列への項目の移動

Question

私は経験豊富なC＃/ ASP.NET開発者であり、将来のすべてのWebフロントエンド開発のためにAngularJSを推進しています。

私は明らかにできない特定の状況があります。私は、 "電子メール"オブジェクトの配列（プロパティ "ID"と "名前"）の配列にバインドされたSELECTを持って、データバインディングを行うためにng-repeatの代わりにng-optionsを使用しています。これは私のためにSELECTを設定するので、リストからアイテムを選択し、ボタンをクリックしてリストからアイテムを削除し、それをセカンダリリストに追加するだけです。私はもともとチェックボックスを使用しようとしていましたが、配列には多数の項目があり、プロジェクトマネージャーはそれを気に入らなかったのです。

私はすべての利用可能な配列関数への参照としてこれを使用しています： http://www.w3schools.com/jsref/jsref_obj_array.asp

私がそのようにC＃のに慣れているので、私はJavaScriptで利用できる同じメソッドを持っていないと私がいますこれを行うための正しい技法を見つけようとするのは難しいです。 "名前"でアルファベット順にソートしたまま、ソース配列内の項目を識別して削除し、ターゲット配列に挿入する最良の方法は何ですか？

これは2番目の質問をします。アイテムを選択してボタンをクリックすると、ng-model属性がSELECTの配列をスキャンするために使用されるアイテムの "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を使用するだけで、完全な電子メールオブジェクトを取得できます。あなたのアプリでは、電子メールを1回だけループして、辞書を構築します。

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

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

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

Iは確か@Shomzが提案されているだけでなく、どのようなソリューションを使用しているができるが@charlietfl提案、私はこれが私のニーズのためにうまくいくと思います。

フィードバックいただきありがとうございます。

ああ、上記のスナップがうまくいかないと申し訳ありません。それはStackOverflowの私の最初の投稿でした...