【问题标题】:How to recombine key and value into an object?如何将键和值重新组合成一个对象?
【发布时间】:2014-11-23 14:31:30
【问题描述】:

在我的 Angular 应用程序中,我使用 ng-repeat 循环浏览我拥有的 JSON 对象中的所有项目。例如,对于我的 JSON 对象:

$scope.animals = 
{
     horse: {
          sound: "Nay",
          legs: 4,
     }
     beaver: {
           sound: "thwack",
           legs: 2
     }
}

我想循环获得一个由Horse, Beaveri.e.组成的列表

<div ng-repeat="(key, value) in animals">
     <div class="niceBox">
          <h1> {{key}} </h1>
     </div>
</div>

但是对于每一种动物,我都想要一个按钮来获取整个对象并将其添加到我最喜欢的动物列表中。像这样的:

<div ng-repeat="(key, value) in animals">
         <div class="niceBox">
              <h1> {{key}} </h1>
              <div ng-click="addToFavorites(animal)">Add To Favorites</div>
         </div>
    </div>

问题是我不能只将animal 作为参数传递,因为我已经将ng-repeat 分解为(key, value)

如何重新组装 (key, value) 以便可以将对象作为一个整体使用?

【问题讨论】:

  • keyvalue 都传递给addToFavorites 怎么样?这个单个对象究竟应该是什么样子?
  • 通常我会重复 ng-repeat="animal in animals 并将 animal 传递给 addToFavorites。然后我在另一边得到一个漂亮干净的物体
  • 那么addToFavorites(value)到底有什么问题?
  • addToFavorites(key, value) {var animal = {key : value} ; $scope.fav.push(动物); }

标签: json angularjs object angularjs-ng-repeat


【解决方案1】:

您的问题具有误导性,因为您没有想要重新组装的原始“对象” - 只有属性名称和值。如果您一开始就为动物设计了一个对象:

var animals = [{
    name: 'horse',
    sound: ...,
    ...
}, {
    name: 'beaver',
    ...
}, ...];

没有什么可以“重新组装”,你只需使用它:

<div ng-repeat="animal in animals">
    {{animal.name}}
    <button ng-click="addToFavorites(animal)">...</button>
</div>

【讨论】:

    【解决方案2】:

    试试这个

    <div ng-repeat="(key, value) in animals">
         <div class="niceBox">
              <h1> {{key}} </h1>
              <div ng-click="addToFavorites(key, value)">Add To Favorites</div>
         </div>
    </div>
    

    在你的控制器中

    $scope.addToFavorites = function(key, value) {
       $scope.animal = {};
       animal[key] = value;
       /** your code **/
    
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-10-18
      • 1970-01-01
      • 1970-01-01
      • 2023-01-10
      • 2019-02-06
      • 1970-01-01
      • 1970-01-01
      • 2019-08-27
      相关资源
      最近更新 更多