3

私は2つのコントローラーを持っています。1 つ目は選択されたアイテムを取得し、2 つ目は利用可能なアイテムを取得します。

新しく選択したアイテムを表示するにはどうすればよいですか?

利用可能な各項目の下にあるボタンには、更新を実行したい updateItem というサービスを呼び出す ng-click があります。

私はしばらくこれに取り組んできました。どんな助けでも大歓迎です。-ありがとう

jsfiddle

<div ng-controller="seletedItemCtrl">
      <p><i>I want to update this item</i></p>
      <div ng-repeat="item in selectedItems">

      <ul>
          <li>{{item.color}}</li>
          <li>{{item.Distance}}</li>
          <li>{{item.height}}</li>
          <li>{{item.name}}</li>
          <li>{{item.year}}</li>
      </ul>
   </div>
</div >   
  ///////////////////////////////////////////////////
  <div ng-controller="availableItemsCtrl">
       <div ng-repeat="item in availableItems">
          <ul>
              <li>{{item.color}}</li> 
              <li>{{item.Distance}}</li>
              <li>{{item.height}}</li>
              <li>{{item.name}}</li>
              <li>{{item.year}}</li>
         </ul>
         <button ng-click = 'updateItem()' >select item</button>
      </div> 
   </div>

JS

var app = angular.module('myApp', []);

function availableItemsCtrl($rootScope, $scope){
        $scope.availableItems =  {
    "Items": {
        "Item": {
            "Group1": [
                {
                    "color": "White",
                    "Distance": "NA",
                    "height": "3ft",
                    "name": "Underlift",
                    "year": "1955"

                  },
                  {
                    "color": "blue",
                    "Distance": "4M",
                    "height": "2ft",
                    "name": "Underlift",
                    "year": "1956"

                  },
                  {
                     "color": "red",
                     "Distance": "NA",
                     "height": "3ft",
                     "name": "Golen Leaf",
                     "year": "1968"

                   },
                   {
                      "color": "yellow",
                      "Distance": "22M",
                      "height": "10in",
                      "name": "Together",
                      "year": "1988"

                   }


              ]
          },

       }
   }
       $scope.availableItems = $scope.availableItems.Items.Item.Group1;
 }

 function seletedItemCtrl($rootScope, $scope){
         $scope.seletedItem =  {
              "Items":{
                  "Item":{
                     "Group1":[{

                         "color": "black",
                         "Distance": "2M",
                         "height": "1in",
                         "name": "never",
                         "year": "1922"

                          }
                       ]
                     }
                   }
                 }
    $scope.selectedItems = $scope.seletedItem.Items.Item.Group1;

  }
    app.service("updateItem", function(){

      console.log('update item');

   });
4

2 に答える 2

7

あなた$scopeはあなたのモデルではないことに注意してください。your$scopeは、モデルを に取り付けるものです。Angular では、アプリケーションの動作を記述する独自のモデル オブジェクトを構築することをお勧めします。この例では、「利用可能なアイテム」と「選択されたアイテム」というドメイン コンセプトがあるようです。これらの概念のモデルを提供する簡単なサービスを次に示します。

app.factory('Items', function () {
    var Items = {
        availableItems: [],
        selectedItems: []
    };
    Items.addAvailableItem = function (item) {
        Items.availableItems.push(item);
    };
    Items.selectItem = function (item) {
        Items.selectedItems.push(item);
    };
    return Items;
});

このItemsサービスにaddAvailableItemは、項目を取得してavailableItems配列に追加するselectItemメソッドと、項目を取得して配列に追加するメソッドがありますselectedItems。コントローラーのスコープを使用して、これら 2 つの配列をビューにバインドできるようになりました。

app.controller('someController', function ($scope, Items) {
    $scope.availableItems = Items.availableItems;
};

これは、提供したコードを出発点として使用して概念を示す jsFiddle です (モジュールでコントローラーを定義するより良い方法も示しています): http://jsfiddle.net/BinaryMuse/kV4mK/

于 2013-02-02T22:12:36.397 に答える
1

これが私の試みです： fiddle。

私はあなたのデータ構造をよく理解していなかったので、少し変更しました。ただし、重要な部分はそこにあると思います-コントローラー間でデータを共有する方法。

function availableItemsCtrl($rootScope, $scope, itemService) {
    $scope.availableItems = [{
        "color": "White",
         ...
    }];
    $scope.updateItem = itemService.storeSelectedItem;
    itemService.storeSelectedItem($scope.availableItems[0]);
}

function selectedItemCtrl($scope, itemService) {
    $scope.selectedItem = itemService.selectedItem;
}

app.service("itemService", function () {
    var that = this;
    this.selectedItem = {};
    this.storeSelectedItem = function (item) {
        angular.copy(item, that.selectedItem);
        console.log('update item', item);
    }
});

angular.copy() の代わりに使用する必要があることを理解するのに（長い）時間がかかりました

that.selectedItem = item;

これは、selectedItemCtrl が気付かない新しい配列参照が selectedItem に割り当てられるためです。つまり、$scope.selectedItem はまだ以前の配列を参照しています。

他の人が何を考え出すのか興味があります。

更新:複数の選択されたアイテムをサポートしたいという事実を完全に見逃したようです。

于 2013-02-02T22:08:16.440 に答える