Angular ng-if 显示整行内容

【问题标题】：Angular ng-if show content entire rowAngular ng-if 显示整行内容
【发布时间】：2016-03-15 03:21:50
【问题描述】：

我想在整行中显示内容。现在我的内容只出现在“名称”列中。点击“更多”即可显示内容。我创建了一个 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

【问题讨论】：

• 你需要添加colspan。
• 谢谢。你的帮助。现在好了。