堆棧內存溢出
  簡體   English   中英

如何在Javascript / AngularJS中動態設置foo等於Object Property Name？

[英]How can I dynamically set foo equal to Object Property Name in Javascript/AngularJS?

 原文  2016-04-11 13:48:55  6   3    javascript/ angularjs/ dynamic

問題描述

我正在嘗試AngularJS中的一些活動，並想知道是否可以動態創建一個表，只使用表頭的ng-repeat，行的ng-repeat和行中的字段的ng-repeat？

基本上我想說“對於對象實例中存在的每個屬性，為myArray中存在的每個對象打印一個新的<\\ th>，打印一個新的<\\ tr>，並為每個存在的屬性在每個對象的每個實例中，在每一行中，打印一個新的<\\ td>。

這是我的控制器： 

var app=angular.module("app04",[]);

app.controller("Controller1",function(){
  this.name="ABCDEFGH";
  this.objectArray=[{name:"Jane Doe", email:"Jane@gmail.com", 
    phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },{name:"John Doe", email:"John@gmail.com", 
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
})

這是身體： 

<body>
  <h1>Hello Angular!</h1>
  <div ng-controller="Controller1 as con1">
    <table>
      <theader>
        <tr>

          <th ng-repeat="object in con1.objectArray[0]">
            {{Object.getOwnPropertyName(object)}}</th>
        </tr>
      </theader>
      <tbody>
        <tr ng-repeat="object in con1.objectArray">
          <td>{{object.name}}</td>
          <td>{{object.email}}</td>
          <td>{{object.phoneModel}}</td>
          <td>{{object.status}}</td>
          <td>{{object.purchaseDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

我被指示寫出標題，因為它是一個非常基本的教程（我只是在第4個視頻），但似乎更方便，更好的可重用性嘗試一個小的思想挑戰，看看它是否可能做一些像我正在嘗試的事情。

問題是Object.getOwnPropertyName和Object.keys似乎沒有使用這個javascript，所以我想知道我是不是這樣做不正確，或者是否有更好的方法。 我還想知道社區關於在我知道所有對象都包含相同屬性的情況下動態創建所有內容的想法？

3 個解決方案

解決方案1
 2  2016-04-11 14:02:18

只需將視圖更改為使用（鍵，值）迭代對象屬性： 

<body>
  <h1>Hello Angular!</h1>
  <div ng-controller="Controller1 as con1">
    <table>
      <theader>
        <tr>

          <th ng-repeat="(key,value) in con1.objectArray[0]">
            {{key}}</th>
        </tr>
      </theader>
      <tbody>
        <tr ng-repeat="object in con1.objectArray">
          <td>{{object.name}}</td>
          <td>{{object.email}}</td>
          <td>{{object.phoneModel}}</td>
          <td>{{object.status}}</td>
          <td>{{object.purchaseDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

解決方案2
 2 已采納  2016-04-11 14:46:30

你能做到的一種方式是這樣的： 

var app=angular.module("app04",[]);

app.controller("Controller1",["$scope", function($scope){
  this.name="ABCDEFGH";
  this.objectArray=[{name:"Jane Doe", email:"Jane@gmail.com", 
    phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },{name:"John Doe", email:"John@gmail.com", 
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
}]);

<body>
  <h1>Hello Angular!</h1>
  <div ng-controller="Controller1 as con1">
    <table>
      <theader>
        <tr>

          <th ng-repeat="(key,value) in con1.objectArray[0]">
            {{key}}</th>
        </tr>
      </theader>
      <tbody>
        <tr ng-repeat="object in con1.objectArray">
          <td>{{object.name}}</td>
          <td>{{object.email}}</td>
          <td>{{object.phoneModel}}</td>
          <td>{{object.status}}</td>
          <td>{{object.purchaseDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

但我現在將從此鏈接引用ng-repeat文檔：

JavaScript規范沒有定義為對象返回的鍵的順序，因此Angular依賴於在myObj中運行key時瀏覽器返回的順序。 瀏覽器通常遵循按照定義順序提供密鑰的策略，盡管在刪除和恢復密鑰時會有例外。 有關詳細信息，請參閱刪除的MDN頁面。

這基本上意味着標題中列的順序不能保證與您期望的數據列的順序相同： 

   <td>{{object.name}}</td>
   <td>{{object.email}}</td>
   <td>{{object.phoneModel}}</td>
   <td>{{object.status}}</td>
   <td>{{object.purchaseDate}}</td>

例如，如果您像這樣定義con1.objectArray[0] ： 

{
  email:"Jane@gmail.com", 
  name:"Jane Doe", 
  phoneModel:"LG Optimus S", 
  status:"sad",
  purchaseDate:"2015-12-01"
}

在大多數瀏覽器中， thead列順序將與預期的不同， email將是第一列，然后是name等...

但是，如果您知道所有對象都將以相同的順序定義，並且您沒有刪除屬性或執行任何可能影響對象中屬性順序的其他操作，則可以執行以下操作： 

<table>
  <theader>
    <tr>
      <th ng-repeat="(key,val) in con1.objectArray[0]">{{key}}</th>
    </tr>
  </theader>
  <tbody>
    <tr ng-repeat="object in con1.objectArray">
      <td ng-repeat="(key,val) in object">{{object[key]}}</td>
    </tr>
  </tbody>
</table>

哪個IMO比第一個例子更好，因為它可以在所有瀏覽器中使用，前提是您遵循粗體文本中的約束。

但最安全的方法是，您只需在數組中定義控制器中的列（屬性名稱），以保證所有瀏覽器的順序： 

app.controller("Controller1",function(){
  this.name="ABCDEFGH";
  this.objectArray=[{name:"Jane Doe", email:"Jane@gmail.com", 
    phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },{name:"John Doe", email:"John@gmail.com", 
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  },{email:"John@gmail.com", name:"John Doe",
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
  this.columns = Object.getOwnPropertyNames(this.objectArray[0]); // or you can do it manually with array ['name', 'email', ...]
});

然后在HTML中 

<div ng-controller="Controller1 as con1">
<table border="1">
  <theader>
    <tr>
      <th ng-repeat="col in con1.columns">{{col}}</th>
    </tr>
  </theader>
  <tbody>
    <tr ng-repeat="object in con1.objectArray">
      <td ng-repeat="col in con1.columns">{{object[col]}}</td>
    </tr>
  </tbody>
</table>
</div>

解決方案3
 -1  2016-04-11 14:01:30

你快到了，這是一種方式：

清理控制器並分離標頭和數據對象： 

var app=angular.module("app04",[]);

app.controller("Controller1",function(){
  this.name="ABCDEFGH";

  this.tableHeaders = ["header1", "header2, "header3"... etc]

  this.objectArray=[
      {name:"Jane Doe", email:"Jane@gmail.com", phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },
      {name:"John Doe", email:"John@gmail.com", phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
})

<div ng-controller="Controller1 as con1">
<table>
  <theader>
    <tr>

      <th ng-repeat="object in con1.tableHeaders">
        {{object}}</th>
    </tr>
  </theader>
  <tbody>
    <tr ng-repeat="object in con1.objectArray">
      <td>{{object.name}}</td>
      <td>{{object.email}}</td>
      <td>{{object.phoneModel}}</td>
      <td>{{object.status}}</td>
      <td>{{object.purchaseDate}}</td>
    </tr>
  </tbody>
</table>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何動態設置JS對象屬性名稱 如何動態替換javascript對象屬性名稱 如何以正確的方式在對象上動態設置屬性？ 在 javascript 如何動態獲取 object 的嵌套屬性 如何在Javascript對象中動態引用變量鍵名？ 在 function 中動態設置 JavaScript object 的屬性名稱 如何在angularjs中動態訪問對象？ javascript如何將Object屬性名作為動態變化的Object管理？ 如何將promise的屬性修改為等於AngularJS中的對象的屬性？ 我怎么能夠？ 設置 foo.style.display 其中 foo 是基於 js 變量遞增的元素名稱
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM