2017-01-30 14 views
0

plunker preview
私はユーザに関する情報を持つメインアレイを持っています。
各項目(ユーザ)は、 'データ' の配列を有する:新しいオブジェクトを作成して回避する機能を持つng-repeat

{ 
    name: 'Linda', 
    data: [ 
    { 
     value: 3 
    }, 
    { 
     value: 6 
    } 
    ] 
} 

私はこのようなメインアレイを印刷する必要がある:

  • リンダ - 3
  • リンダ - 6

更新:入力の名前を変更できます。バージョン2を参照してください。


したがって、新しいオブジェクトを返す関数でng-repeatを使用します。 [$ rootScope::infdig]そして、私は知らエラーが出ます:「変更」フィルタと「リンカ」工場このエラーを回避するには

を私はgoogle groupsアプローチを使用しています。
($$ hashKeyアプローチを使用したかったが、どうやってそれを行うのか分からなかった)

このエラーを表示するには、自分のコードを開いてHTMLの '変更'フィルタを削除します。

質問:多分配列を印刷する方が簡単でしょうか?ありがとう。
印刷前にソートするとしたら?

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.users = [ 
 
    { 
 
     name: 'Linda', 
 
     data: [ 
 
     { 
 
      value: 3 
 
     }, 
 
     { 
 
      value: 6 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     name: 'John', 
 
     data: [ 
 
     { 
 
      value: 2 
 
     }, 
 
     { 
 
      value: 11 
 
     } 
 
     ] 
 
    } 
 
    ]; 
 

 
    $scope.getUsersData = function(){ 
 
    var output = []; 
 
    $scope.users.forEach(function(user){ 
 
     if ('data' in user) { 
 
     user.data.forEach(function(userData){ 
 
      output.push({name: user.name, value: userData.value}); 
 
     }); 
 
     } 
 
    }); 
 
    return output; 
 
    }; 
 
}); 
 

 
// From https://groups.google.com/d/msg/angular/IEIQok-YkpU/iDw32-YRr3QJ 
 
app.filter('change', function(linker) { 
 
    return function(items) { 
 
     var collection = items.map(function (item) { 
 
     return item; 
 
     }); 
 

 
     return linker(collection, 'some-key'); 
 
    }; 
 
}); 
 

 
app.factory('linker', function() { 
 
    var links = {}; 
 
    return function (arr, key) { 
 
    var link = links[key] || []; 
 

 
    arr.forEach(function (newItem, index) { 
 
     var oldItem = link[index]; 
 
     if (!angular.equals(oldItem, newItem)) 
 
     link[index] = newItem; 
 
    }); 
 

 
    link.length = arr.length; 
 

 
    return links[key] = link; 
 
    } 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <body ng-app="plunker" ng-controller="MainCtrl as main"> 
 
    <ul> 
 
     <li ng-repeat="user in users = getUsersData() | change track by $index">{{user.name}} - {{user.value}}</li> 
 
    </ul> 
 
    <hr> 
 
    <div ng-repeat="user in users"> 
 
    <input ng-model="user.name"/> 
 
    </div> 
 
    </body>

+0

だと思います。 – MMK

答えて

0

plunker version 3
せずに、私は、入力フィールド内ユーザー名を変更する必要があります。だから私は私のために簡単かつ高速なソリューションを使用する$ウォッチあなたはこのようngRepeatで機能を使用することはできません

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.users = [ 
 
    { 
 
     name: 'Linda', 
 
     data: [ 
 
     { 
 
      value: 3 
 
     }, 
 
     { 
 
      value: 6 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     name: 'John', 
 
     data: [ 
 
     { 
 
      value: 2 
 
     }, 
 
     { 
 
      value: 11 
 
     } 
 
     ] 
 
    } 
 
    ]; 
 
    
 
    $scope.$watch(function(){ 
 
    return JSON.stringify($scope.users); 
 
    }, function(){ 
 
    $scope.usersData = $scope.prepareUsersForPrint($scope.users); 
 
    }) 
 

 
    $scope.prepareUsersForPrint = function(arr){ 
 
    var output = []; 
 
    arr.forEach(function(user){ 
 
     if ('data' in user) { 
 
     user.data.forEach(function(userData){ 
 
      output.push({name: user.name, value: userData.value}); 
 
     }); 
 
     } 
 
    }); 
 
    return output; 
 
    }; 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <body ng-app="plunker" ng-controller="MainCtrl as main"> 
 
    <ul> 
 
     <li ng-repeat="user in usersData track by $index">{{user.name}} - {{user.value}}</li> 
 
    </ul> 
 
    <hr> 
 
    <div ng-repeat="user in users"> 
 
     <input ng-model="user.name"/> 
 
    </div> 
 
    </body>

0

あなたがtrack byを使用している場合角度は、あなたの配列内のオブジェクトに$$hashKeyプロパティを追加しません。 の配列で変更を追跡し続けるために、angleによって追加されるデフォルトのプロパティーは$$hashKeyです。 ハッシュキー

0

を利用するためにtrack byなし 使用ng-repeatはこのような何かを試してみてください。フィルタまたはネストされたNGリピート

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

 
app.controller('MainCtrl', function($scope) { 
 
    var users = [{ 
 
    name: 'Linda', 
 
    data: [{ 
 
     value: 3 
 
    }, { 
 
     value: 6 
 
    }] 
 
    }, { 
 
    name: 'John', 
 
    data: [{ 
 
     value: 2 
 
    }, { 
 
     value: 11 
 
    }] 
 
    }]; 
 

 
    $scope.getUsersData = function() { 
 
    var output = []; 
 
    users.forEach(function(user, ind) { 
 
     if ('data' in user) { 
 
     user.data.forEach(function(userData, ind) { 
 
      output.push({ 
 
      name: user.name, 
 
      value: userData.value 
 
      }); 
 
     }); 
 
     } 
 
    }); 
 
    return output; 
 
    }; 
 
    $scope.userFetchedData = $scope.getUsersData(); // here is the magic 
 

 
}); 
 

 

 

 

 
app.factory('linker', function() { 
 
    var links = {}; 
 
    return function(arr, key) { 
 
    var link = links[key] || []; 
 

 
    arr.forEach(function(newItem, index) { 
 
     var oldItem = link[index]; 
 
     if (!angular.equals(oldItem, newItem)) 
 
     link[index] = newItem; 
 
    }); 
 

 
    link.length = arr.length; 
 

 
    return links[key] = link; 
 
    } 
 
})
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <ul> 
 
    <li ng-repeat="user in userFetchedData track by $index">{{user.name}} - {{user.value}}</li> 
 
    </ul> 
 
</body> 
 

 
</html>

関連する問題