Question

我正在尝试AngularJS中的一些活动，并想知道是否可以仅使用表头的ng-repeat，行的ng-repeat和ng-repeat来动态创建表。行中的字段？

基本上我想说＆＃34;对于对象实例中存在的每个属性，为myArray中存在的每个对象打印一个新的＆lt; \ th＆gt;，打印一个新的＆lt; \ tr＆gt;，并且对于每个对象的每个实例中存在的每个属性，在每一行中，打印一个新的＆lt; \ td＆gt;。

这是我的控制人员：

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，所以我想知道我是不是做错了，或者是否有更好的方法。我还想知道社区关于在我知道所有对象都包含相同属性的情况下动态创建所有内容的想法？

Answer 1

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

x = input("What is wrong with your phone?")
if "dropped" in x:
   print("You've dropped your phone!")

Answer 2

你能做到的一种方式就是这样：

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>

但我现在引用this link中的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>

Answer 3

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

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

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>

如何在Javascript / AngularJS中动态设置foo等于Object Property Name？

3 个答案: