2

我使用 Knockout 进行了以下编码：

        <form action='/someServerSideHandler'>
            <p>You have asked for <span data-bind='text: citys().length'>&nbsp;</span> city(s)</p>
            <table data-bind='visible: citys().length > 0'>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th />
                    </tr>
                </thead>
                <tbody data-bind='foreach: citys'>
                    <tr>
                        <td>
                            <input class='required' data-bind='value: CityId' /></td>
                        <td>
                            <input class='required' data-bind='value: Name' /></td>
                        <td>
                            <input class='required' data-bind='value: Description' /></td>
                        <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
                    </tr>
                </tbody>
            </table>

            <button data-bind='click: addCity'>Add City</button>
            <button data-bind='enable: citys().length > 0' type='submit'>Submit</button>
        </form>

我想把它移到 AngularJS，但我不知道从哪里开始。如您所见，这是一个非常简单的网格。这就是我所需要的。我不需要 ng-grid 的复杂性。

有没有人看过任何教程或简单网格的示例，我可以用来帮助我将上述内容转换为 AngularJS 网格？

还有一个小问题。我研究过使用 ng-grid，但让我无法使用它的是它的大小和它需要 jQuery 的事实。有谁知道如果我没有 jQuery 会发生什么，它还能工作吗？还有 ng-grid 的最小尺寸是多少。我刚刚注意到一个下载，比如说 800K ！

4

1 回答 1

4

从 Knockout 转换为 Angular 非常容易。他们在视图中几乎使用相同的概念。

这是相同的 html（如上），但已转换为 Angular。

<form action='/someServerSideHandler'>
  <p>You have asked for {{citys.length}} city(s)</p>
  <table ng-show="citys.length > 0">
      <thead>
          <tr>
              <th>Id</th>
              <th>Name</th>
              <th />
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="city in citys">
              <td>
                  <input class='required' ng-model="city.cityId" /></td>
              <td>
                  <input class='required' ng-model="city.Name" /></td>
              <td>
                  <input class='required' ng-model="city.Description" /></td>
              <td><a href='#' ng-click="removeGift()">Delete</a></td>
          </tr>
      </tbody>
  </table>

  <button ng-click="addCity()">Add City</button>
  <button ng-disable="!citys.length" type='submit'>Submit</button>
</form>
于 2013-04-06T10:19:01.060 回答