Question

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

我有一个listview，它使用ng-repeat来创建列表项。

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

我尝试使用创建和刷新方法，我尝试添加一个小延迟，正如类似问题的答案所建议的那样，我找到的建议都没有。

以下是代码：

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最新版本不需要刷新视图。它会自动渲染。

请提出jsfiddle

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

1 个答案: