代码之家 › 专栏 › 技术社区 › Raju Sah

无法使用ng repeat start(ngAnimate)来扩展跟踪表行

ng-animate angular-ngmodel angularjs-ng-repeat angularjs

0

Raju Sah · 技术社区 · 6 年前

我想跟踪扩展的行并用城市和工作详细信息保存表单,问题是在单击特定行时,它正在用表单扩展,但我无法跟踪该行。。。

var app = angular.module('app', ['ngAnimate']);

app.controller('itemsController', function( $scope ) {

$scope.divisions    = [{id:12, div_name:' city1'},
                      {id:13, div_name:' city2'},
                      {id:14, div_name:' city3'}];

$scope.works        =[{wid:111, w_name:'work1'},
                     {wid:222, w_name:'work2'},
                     {wid:333, w_name:'work3'}];
});

html

<div ng-controller="itemsController" class="box">

<table border="1">
    <tbody ng-repeat-start="division in divisions">
        <td>
            {{division.div_name}}
            <em>{{expanded}}</em>
        </td>
        <td>Values: {{divisions.length}}</td>
        <td>
            <button type="button" ng-click="expanded = !expanded">
                Expand
            </button>
        </td>
    </tbody>
    <tbody ng-repeat-end ng-show="expanded">
        <td colspan="3">

             <select ng-model="result.division.tt">
               <option value='01'>tt1..........</option>
               <option value='02'>tt2..........</option>
             </select><br/><br/>
                <ul ng-repeat="work in works">
                   {{work.w_name}}  <input type=text />                                
                </ul><br/><br/>
                 <button ng-click="save()">save</button>
        </td>
    </tbody>
</table>{{result |json}}

链接- http://jsfiddle.net/raju10281/eqk6attx/18/

提前谢谢!!!

1 回复 | 直到 6 年前

1

0

Slava Utesinov 6 年前

试试这个 solution . 您应该创建对象( ng-init='data={}' )对于每个 ng-repeat . 它将显示每个表单的内容,然后您可以在控制器内使用它( ng-click="save(division, data)" )具有适当的 division :

<tbody ng-repeat-end ng-show="expanded" ng-init='data={id:division.id,div_name:division.div_name,works:[]}'>
    <td colspan="3">

         <select ng-model="data.tt">
           <option value='01'>tt1..........</option>
           <option value='02'>tt2..........</option>
         </select><br/><br/>
            <ul ng-repeat="work in works" ng-init='data.works[$index]={wid:work.wid,w_name:work.w_name}'>
               {{work.w_name}}  <input type=text ng-model='data.works[$index].input' />
            </ul><br/><br/>
            <button ng-click="save(division, data)">save</button>
    </td>
</tbody>