在使用滤波器进行ng-repeat之后如何更改表中的行

时间:2019-03-16 18:33:34

标签: angularjs

我正在使UI像Excel。但是我有很大的麻烦。

当我单击<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="com.mysql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost:3306/databasename" /> <property name="username" value="root" /> <property name="password" value="password" /> </bean> 按钮时,只有表格中的该行更改模板才能编辑(例如

到...),我需要。但是我做不到。 泰国人是我的方式:

update

在我的AngularJS控制器中,我不知道该怎么写。你能帮我做这个UI吗?非常感谢!

<tbody dir-paginate="student in ClassStudents | filter: search | itemsPerPage: 20 track by $index">
    <tr ng-show="NormalMode">
        <td>{{student.Student.StudentName}}</td>

        <td>
            <button class="btn btn-primary">Detail</button>
            <button ng-click="updateEvent($index)" class="btn btn-primary">
              Update
            </button>
            <button class="btn btn-primary">Delete</button>
        </td>
    </tr>
    <tr ng-show="EditorMode">
        <td><input type="text" ng-model="student.Student.StudentName"></td>
        <td>
            <button class="btn btn-primary">Save</button>
            <button class="btn btn-primary">Cancel</button>
        </td>
    </tr>

1 个答案:

答案 0 :(得分:0)

ng-click处理程序将项目作为参数而不是$index传递:

̶<̶t̶b̶o̶d̶y̶ ̶d̶i̶r̶-̶p̶a̶g̶i̶n̶a̶t̶e̶=̶"̶s̶t̶u̶d̶e̶n̶t̶ ̶i̶n̶ ̶C̶l̶a̶s̶s̶S̶t̶u̶d̶e̶n̶t̶s̶ ̶|̶ ̶f̶i̶l̶t̶e̶r̶:̶ ̶s̶e̶a̶r̶c̶h̶ ̶|̶ ̶i̶t̶e̶m̶s̶P̶e̶r̶P̶a̶g̶e̶:̶ ̶2̶0̶ ̶t̶r̶a̶c̶k̶ ̶b̶y̶ ̶$̶i̶n̶d̶e̶x̶"̶>̶
<tbody dir-paginate="student in ClassStudents | filter: search | itemsPerPage: 20">
    <tr ng-show="NormalMode">
        <td>{{student.Student.StudentName}}</td>

        <td>
            <button class="btn btn-primary">Detail</button>
            ̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶u̶p̶d̶a̶t̶e̶E̶v̶e̶n̶t̶(̶$̶i̶n̶d̶e̶x̶)̶"̶ ̶c̶l̶a̶s̶s̶=̶"̶b̶t̶n̶ ̶b̶t̶n̶-̶p̶r̶i̶m̶a̶r̶y̶"̶>̶
            <button ng-click="updateEvent(student)" class="btn btn-primary">
              Update
            </button>
            <button class="btn btn-primary">Delete</button>
        </td>
    </tr>

ng-repeat中的过滤器使视图的$indexClassStudents数组中项目的索引不同。而是将实际项目传递给updateItem函数。

此外,当列表包含从数组中筛选出的对象时,使用track by $index是不明智的。参见When not to use 'track by $index' in an AngularJS ng-repeat?