Crericulum and field names



  • Grid build on JSON. Something like that.

    <tr ng-repeat="person in people">
        <td>[{{$index + 1}}]  {{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
    

    The question is: in this code, I refer directly to the collection fields (person.firstName). What if the name of the i-field is unknown? Is it possible to turn like person.fields[i]? Is there such a syntax in the angloular?

    The challenge can be further complicated: the number of fields unknown (i.e. the number of td tgs required to generate dynamically)

    UPD

    JSON: [
        {"id": "1",    "firstName": "Peter", "lastName": "Jhons"},
        {"id": "2",    "firstName": "Marcus", "lastName": "Smith"},
        {"id": "3",    "firstName": "Grotter", "lastName": "Changer"}
    ]
    

    shall be obtained:

    <table>
      <tr>
        <th>id </th> <th>firstName </th> <th>lastName </th>
      </tr>
      <tr>
         <td>1<td> <td>‌​Peter</td><td>Jhons </td>
      </tr> 
      <tr>
         <td>2<td> <td>‌​Marcus</td><td>Smith </td>
      </tr> 
      <tr>
         <td>1<td> <td>‌​Grotter</td><td>Changer </td>
      </tr> 
     </table>
    


  • https://docs.angularjs.org/api/ng/directive/ngRepeat Works with both masses and objects

    In the case of a mass, the expression can look like that.

    variable in expression
    

    where variable - is the meaning of a specific element of the mass.

    In the case of objects

    (key, value) in expression
    

    where key - that's the name of the field. value - it's the meaning of the field.

    angular.module('app', [])
      .controller('ctrl', function() {
        this.people = [{
          id: 1,
          lastName: 'Иванов'
        }, {
          id: 2,
          lastName: 'Петров',
          firstName: 'Петр'
        }, {
          id: 3,
          lastName: 'Кузнецов',
          firstName: 'Кузнец',
          middleName: 'Кузнецович'
        }];
    

    });

    .people {
    background-color: yellow;
    border: 1px solid black;
    display: flex;
    justify-content: flex-start;
    }
    .id {
    width: 10%
    }
    .lastName {
    background-color: red;
    width: 25%
    }
    .firstName {
    background-color: green;
    width: 25%
    }
    .middleName {
    background-color: blue;
    color:yellow;
    flex-grow:1;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <div ng-app="app" ng-controller="ctrl as c">
    <div class="people" ng-repeat="person in c.people">
    <div class="{{k}}" ng-repeat="(k,v) in person">{{k}} - {{v}}</div>
    </div>

    </div>

    where there may be a different number of cells on each line, it is likely that a table should not be used. The same Number of cells in each line

    Updating

    If a separate line needs to remove the names of the fields, it's easier to keep them in a separate variable, which is then used.

    angular.module('app', [])
    .controller('ctrl', function() {
    this.people = [{
    "id": "1",
    "firstName": "Peter",
    "lastName": "Jhons"
    }, {
    "id": "2",
    "firstName": "Marcus",
    "lastName": "Smith"
    }, {
    "id": "3",
    "firstName": "Grotter",
    "lastName": "Changer"
    }];
    this.fields = Object.keys(this.people[0]); //получаем ключи из первого объекта

    });

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <div ng-app="app" ng-controller="ctrl as c">
    <table>
    <tr>
    <th ng-repeat="field in c.fields">{{field}}</th>
    </tr>
    <tr class="people" ng-repeat="person in c.people">
    <td ng-repeat="field in c.fields">{{person[field]}}</td>
    </tr>
    </table>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2