角度模型更新时查询列表视图样式不适用

Question

我正在使用 Jquery 和 Angular 构建一个应用程序，但遇到了问题。

我有一个使用 ng-repeat 来创建列表项的列表视图。

当页面加载时，列表的样式正确。但是，当我使用页面上的表单将新项目添加到列表中时，它不会正确设置新项目的样式。

我尝试过使用 create 和 refresh 方法，我尝试过添加一个小的延迟，正如类似问题的答案所建议的那样，我发现的所有建议都不起作用。

代码如下：

HTML：

<table style="width:100%;  border:1px solid black">
            <tr>
                <td id="blockA" style="width:25%">
                    <ul data-role="listview" data-inset="true" id="#ftfcList">
                        <li id="thisCourse.id" ng-repeat="thisCourse in courses.theCourses" ng-click="courses.selected=thisCourse" ng-class="{ftfHighlight:courses.selected.id === thisCourse.id}">{{thisCourse.title}}</li>
                    </ul>
                </td>

                <td id="blockB" style="width:50%" valign="top">
                    <div ng-show="courses.selected">

                        <ul data-role="listview" data-inset="true">
                            <li><h3>{{courses.selected.title}}</h3></li>
                            <li><b>ID: </b> {{courses.selected.id}}</li>
                            <li><b>length: </b> {{courses.selected.length}}</li>
                            <li><b>Aims: </b></li>
                            <li>{{courses.selected.aims[0]}}</li>
                            <li>{{courses.selected.aims[1]}}</li>
                            <li>{{courses.selected.aims[2]}}</li>
                            <li>{{courses.selected.aims[3]}}</li>
                        </ul>
                    </div>
                    <div ng-hide="courses.selected">
                        <ul data-role="listview" data-inset="true">
                            <li>Please select a course (in the left panel) or create a new one to view it's details</li>
                        </ul>
                    </div>
                </td>
                <td id="blockC" style="width:25%">
                    <form style="width:100%">                       
                        <ul data-role="listview" data-inset="true">
                            <li><input type="text" placeholder="Title" ng-model="courses.newCourse.title"/></li>
                            <li><input type="text" ng-model="courses.newCourse.id" placeholder="ID (Please use CamelCase)"/></li>
                            <li><b>length: </b> {{courses.selected.length}}</li>
                            <li><b>Aims: </b></li>
                            <li><input type="text" ng-model="courses.newCourse.aims[0]" placeholder="First objective"/></li>
                            <li><input type="text" ng-model="courses.newCourse.aims[1]" placeholder="Second objective"/></li>
                            <li><input type="text" ng-model="courses.newCourse.aims[2]" placeholder="Third objective"/></li>
                            <li><input type="text" ng-model="courses.newCourse.aims[3]" placeholder="Fourth objective"/></li>
                        </ul>
                        <a data-role="button" ng-click="courses.addCourse()">Add this course</a>
                    </form>
                </td>
            </tr>
        </table>    

和javascript：

var course = [{id: "test2", title: "Test 2", length: "1 day", aims: ["To test that the app can use face to face courses", "To implement back-end support"], notes: "Completley experimental"}, {id: "test", title: "Test", length: "1 day", aims: ["To test that the app can use face to face courses", "To implement back-end support"], notes: "Completley experimental"}];

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

var courseController = app.controller("ftfCourseController", function()     {
this.selected;
this.newCourse;
this.theCourses = course;

this.addCourse= function(){
    console.log(this.theCourses);
    this.theCourses.push(this.newCourse);
    this.newCourse = undefined;
    setTimeout(function(){$("#ftfcList").listview("refresh");}, 100);

}

});

任何人都可以看到这里的问题吗？

感谢您提供的任何帮助:)

Answer 1

我不知道您使用的是哪个版本的 Angular。

无需刷新视图。在范围对象中添加或删除某些内容后，Angular 最新版本不需要刷新视图。它会自动渲染。

请拿出 jsfiddle