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グリッドに変換するのに役立つチュートリアルや単純なグリッドの例を見た人はいますか?

もう 1 つ小さな質問です。私は ng-grid の使用を検討しましたが、使用を先延ばしにしたのは、サイズと、jQuery が必要であるという事実でした。jQueryを持っていない場合、どうなるか知っている人はいますか?それでも動作しますか? また、ng-grid の最小サイズは何ですか。800K と言うような 1 つのダウンロードに気付きました !

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 に答える