1

我有一个表格用于更新从宁静服务填充的记录。

其中一个字段使用选择作为查找值，我将其绑定到模型中的对象。

选择已正确创建，并且选择选项会对我的模型进行正确更改。

问题是当我最初加载页面时，选择是空白的。

有没有办法正确设置初始值，而无需爬取查找对象并匹配 id 以获得自动生成的索引位置？

或者更好的是，将值设置为对象而不是自动生成的索引。

<div ng-controller="MyCtrl">
    Id: <input ng-model="course.id" readonly><br>
    Cost: <input ng-model="course.cost" ng-required="true"><br>
    Title: <select ng-model="course.courseTitle" ng-options="title.name for title in courseTitles">
      </select> {{course.courseTitle.description}}<br>
    Length: <input ng-model="course.length" ng-required="true"><br>
    <br>
    Id: {{course.id}}<br>
    Cost: {{course.cost}}<br>
    Title: {{course.courseTitle.name}}<br>
    Length: {{course.length}}
</div>

function MyCtrl($scope) {
    $scope.course = {
        "id": "108",
        "cost": "155",
        "courseTitle": {
            "description": "Description of course 37.",
            "id": "37",
            "name": "Course 37 Name"
        },
        "length": "7"
    };

    $scope.courseTitles = [{
        "description": "Description of course 37.",
        "id": "37",
        "name": "Course 37 Name"},
    {
        "description": "Description of course 63.",
        "id": "67",
        "name": "Course 63 Name"},
    {
        "description": "Description of course 88.",
        "id": "88",
        "name": "Course 88 Name"}];

}

我在这里创建了一个小提琴 - http://jsfiddle.net/bcarter/Jxydp/

4

3 回答 3

5

使用 ng-options 的“track by”子句

<select ng-model="course.courseTitle" 
        ng-options="title.name for title in courseTitles track by title.id">
</select>

这将导致比较通过 title.id == other.id 而不是 title == other 进行检查

于 2014-09-28T15:05:14.903 回答
1

这是因为您在这里使用了两个不同的对象。你有

    {
        "description": "Description of course 37.",
        "id": "37",
        "name": "Course 37 Name"
    }

定义了两次，创建了两个不同的引用。如果您使用相同的对象，它将按预期工作。请参阅http://jsfiddle.net/Jxydp/14/（可能有更好的方法，但它说明了我的观点）

于 2012-12-07T00:05:26.157 回答
0

这可能有点固执己见，但我认为更改数据结构会更好。只需为您的模型设置一个数组

$scope.courses = [{
    "cost": "155",
    "description": "Description of course 37.",
    "id": "37",
    "name": "Course 37 Name",
    "length": "8"
},{
    "cost": "156",
    "description": "Description of course 63.",
    "id": "67",
    "name": "Course 63 Name",
    "length": "9"        
},{
    "cost": "157",
    "description": "Description of course 88.",
    "id": "88",
    "name": "Course 88 Name",
    "length": "9"        
}];

然后在你的元素中改变ngModel和ngOptionsselect

<select ng-model="course" ng-options="course.name for course in courses">

然后在您的控制器中告诉 Angular 将您的课程中的任何课程设置为初始课程

$scope.course = $scope.courses[0];

这样您就无需担心另一个对象并保持同步，让 Angular 为您完成。

JSfiddle 在这里http://jsfiddle.net/jaimem/uuCfx/1/

于 2012-12-07T00:29:33.457 回答