Question

我想在整行显示内容。现在，我的内容仅出现在“名称”列中。单击“更多”可以显示内容。我创建了一个Plunker：

必须将窗口绘制得更大，以便在Plunker中正确显示内容。 Plunker

这是我的数据

 $scope.data = [{
    "example": "5235235",
    "name": "22222",
    "__v": 0,

    "test": {
      "a": "731",
      "b": "671",
      "c": "671",
      "d": "671",
      "e": "671",
      "f": "671",
      "g": "671",
      "h": "1342",
      "i": "1342",
      "j": "1342",
      "k": "1342",
      "l": "1342",
      "m": "1322",
      "n": "1342"
    }
  }]

表：

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Example</th>
        <th>Test</th>
        <th>Button</th>
      </tr>
      <tr>



      </tr>
    </thead>
    <tbody ng-repeat="dat in data ">
      <tr>
        <td>{{dat.name}}</td>
        <td>{{dat.example}}</td>
        <td>{{dat.test.a}}</td>
        <td>

          <button ng-click="show=!show" class="btn btn-info">
            <span class="glyphicon glyphicon-pencil">More</span>
          </button>

        </td>

        <tr class="dat-details" ng-if="show">
          <td>
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label class="col-md-2 control-label">Name</label>

                <div class="col-md-3">
                  <input ng-model="dat.name" class="form-control" placeholder="Name" type="text" />
                </div>
              </div>


              <div class="form-group">
                <label class="col-md-2 control-label">Example</label>

                <div class="col-md-3">
                  <input ng-model="dat.example" class="form-control" placeholder="Example" type="text" />

                </div>
              </div>
              <div class="form-group">
                <div class="form-group">
                  <span class="col-md-2 control-label">Test</span>
                </div>

                <div class="col-md-12">
                  <div class="form-group ">
                    <label class="col-md-2 control-label">A</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.a" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">B</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.b" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">C</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.c" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">D</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.d" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">E</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.e" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">F</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.f" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">G</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.g" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">H</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.h" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">I</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.i" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">J</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.j" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">K</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.k" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">L</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.l" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">M</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.m" class="form-control" type="text" />
                    </div>


                    <label class="col-md-2 control-label">N</label>

                    <div class="col-md-4">
                      <input ng-model="dat.test.n" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <button ng-click="show=!show" class="btn btn-success">
                <span class="glyphicon glyphicon-ok"></span> Updaten
              </button>

            </form>
          </td>
        </tr>
    </tbody>
  </table>

Plunker：Plunker

Answer 1

@P ... P ...写一条评论：

您需要添加colspan。 <tr class="dat-details" ng-if="show"> <td colspan="4">

Angular ng-if显示内容整行

1 个答案: