如何在Javascript/AngularJS中动态地将foo设置为Object Property Name

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

本文关键字：设置 foo Object Name Property 动态 Javascript AngularJS      更新时间：2024-04-18

我正在AngularJS中尝试一些活动，想知道是否可以动态创建一个表，只使用表头的ng重复、行的ng重复和行中字段的ng重复？

从本质上讲，我想说"对于对象实例中存在的每个属性，打印一个新的<''th>，对于myArray中存在的每一个对象，打印一一个新<''tr>，对于每一行中存在于每个对象实例中的每一属性，打印新的&llt；''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>

我被要求写出标题，因为这是一个非常基本的教程（我只在第四个视频中），但尝试一个小的思考挑战，看看是否有可能做一些类似我上面尝试的事情，似乎更方便，也更好地重新使用。

问题是Object.getOwnPropertyName和Object.keys似乎无法使用此javascript，所以我想知道我是否做得不正确，或者是否有更好的方法。我还想知道在我知道所有对象都包含相同属性的情况下，社区对动态创建所有对象的想法？

可以这样做的一种方法是：

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中为键运行时浏览器返回的顺序。浏览器通常遵循按定义顺序提供密钥的策略，尽管在删除和恢复密钥时也有例外。有关详细信息，请参阅删除的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>

只需将视图更改为使用（键，值）来迭代对象属性：

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

你就快到了，这是一种方式：

清理您的控制器并分离标题和数据对象：

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>

相关文章：