دستورات ng-repeat در AngularJS

در این مقاله به استفاده از دستورات ng-repeat در AngularJS میپردازیم. دستورات ng-repeat از آرایه ای از اشیا برای تکرار یک عنصر Html استفاده می کند. ما میتوانیم از index, $first, $last, $middle, $even, $odd$ با استفاده از ngRepeat استفاده کنیم.

در این مقاله به استفاده از دستورات ng-repeat در AngularJS میپردازیم. دستورات ng-repeat از آرایه ای از اشیا برای تکرار یک عنصر Html استفاده می کند. ما میتوانیم از index$ با استفاده از ngRepeat استفاده کنیم. در این مقاله سعی میکنیم با ساخت نمونه ای ساده این موضوع را درک کنیم.

مثال اول

<ul>  
<li data-ng-repeat="x in friends">  
   {{ x }}  
</li>  
</ul>

کد Html به صورت کامل

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8" />  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>  
</head>  
<body>  
    <div data-ng-app="" data-ng-init="friends  
         =['Banketeshvar Narayan','Mnaish Sharma','Rajnish Kumar','Om Prakash']">  
        <p>List of Friends</p>  
        <ul>  
            <li data-ng-repeat="x in friends">  
                {{ x }}  
            </li>  
        </ul>  
    </div>  
</body>  
</html>

نمایش در مرورگر

مثال دوم

<ul>
      <li ng-repeat="person in selectablePeople">
        <strong>Object {{$index + 1}}</strong>
        <ul>
          <li ng-repeat="(propName, propValue) in person">
            {{$index + 1}}. <strong>name =</strong> {{propName}}, <strong>value =</strong> {{propValue}}
          </li>
        </ul>
      </li>
    </ul>

کد کامل Html

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>

  <style>
    table
    {
      border-collapse: collapse;
    }

    table, th, td
    {
      border: 1px solid #e1e1e1;
    }

    th, td
    {
      padding: 6px;
    }

    thead
    {
      background-color: #fcfcfc;
    }
  </style>
</head>

<body ng-app="mainModule" dir="rtl">
  <div ng-controller="mainController">
    <h3>مثال جدول</h3>
    <table>
      <thead>
        <tr>
          <th>نام</th>
          <th>نام خانوادگی</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in people">
          <td>{{person.firstName}}</td>
          <td>{{person.lastName}}</td>
        </tr>
      </tbody>
    </table>
    <br />
    <h3>جدول ردیف</h3>
    <table>
      <thead>
      <tr>
        <th>
          <input type="checkbox" ng-model="areAllPeopleSelected"
                 ng-change="updatePeopleSelection(selectablePeople, areAllPeopleSelected)" />
        </th>
        <th>نام</th>
        <th>نام خانوادگی</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="person in selectablePeople">
        <td><input type="checkbox" ng-model="person.isSelected" /></td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
      </tr>
      </tbody>
    </table>
    <br />
    <h3>لیست</h3>
    <ul>
      <li ng-repeat="person in people">
        {{$index + 1}}. {{person.firstName}} {{person.lastName}} <strong>{{getPersonPositionDesc($first, $middle, $last, $even, $odd)}}</strong>
      </li>
    </ul>
    <br />
    <h3>لیست تو در تو</h3>
    <ul>
      <li ng-repeat="person in selectablePeople">
        <strong>شی {{$index + 1}}</strong>
        <ul>
          <li ng-repeat="(propName, propValue) in person">
            {{$index + 1}}. <strong>نام =</strong> {{propName}}, <strong>مقدار =</strong> {{propValue}}
          </li>
        </ul>
      </li>
    </ul>
    <br />
    <h3>افزودن و حذف ایتم</h3>
    <button ng-click="addStringToArray()">افزودن ایتم</button><br />
    <br />
    <table>
      <tbody>
      <tr ng-repeat="str in stringsArray">
        <td><button ng-click="$parent.removeStringFromArray($index)" />حذف</td>
        <td>{{str}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

کد Js

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.areAllPeopleSelected = false;

    $scope.people = [
      {firstName: "رضا", lastName: "رضایی"},
      {firstName: "رضا", lastName: "رضایی"},
      {firstName: "رضا", lastName: "رضایی"},
      {firstName: "رضا", lastName: "رضایی"}
    ];

    $scope.selectablePeople = [
      {firstName: "رضا", lastName: "رضایی", isSelected: false},
      {firstName: "علی", lastName: "محمدی", isSelected: false},
      {firstName: "حمید", lastName: "احمدی", isSelected: false},
      {firstName: "امین", lastName: "مولایی", isSelected: false}
    ];

    $scope.stringsArray = [];
    var currStringIndex = 0;

    // Utility functions
    $scope.updatePeopleSelection = function (peopleArray, selectionValue) {
      for (var i = 0; i < peopleArray.length; i++)
      {
        peopleArray[i].isSelected = selectionValue;
      }
    };

    $scope.getPersonPositionDesc = function(isFirst, isMiddle, isLast, isEven, isOdd) {
      var result = "";

      if (isFirst)
      {
        result = "(اول";
      }
      else if (isMiddle)
      {
        result = "(وسط";
      }
      else if (isLast)
      {
        result = "(اخر";
      }

      if (isEven)
      {
        result += "-کاراموز)";
      }
      else if (isOdd)
      {
        result += "-مدرس)";
      }

      return result;
    };

    $scope.addStringToArray = function () {
      $scope.stringsArray.push("Item " + currStringIndex);
      currStringIndex++;
    };

    $scope.removeStringFromArray = function (stringIndex) {
      if (stringIndex >= 0 && stringIndex < $scope.stringsArray.length)
      {
        $scope.stringsArray.splice(stringIndex, 1);
      }
    };
  });

آموزش angular

فایل های ضمیمه

4184_Angular Expression.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

دستورات ng-repeat در AngularJS

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید