Javascript 仅当在select ng选项中使用as语法时，数据绑定才起作用

我拥有《AngularJS》一书中的以下角度控制器：

angular.module('Angello.Storyboard')
    .controller('StoryboardCtrl', function() {
        var storyboard = this;

        storyboard.currentStory = null;
        storyboard.editedStory = {};

        storyboard.setCurrentStory = function(story) {
            storyboard.currentStory = story;
            storyboard.editedStory = angular.copy(storyboard.currentStory);
        };

        storyboard.stories = [
            {
                "assignee": "1",
                "criteria": "It tests!",
                "description": "This is a test",
                "id": "1",
                "reporter": "2",
                "status": "To Do",
                "title": "First Story",
                "type": "Spike"
            },
            {
                "assignee": "2",
                "criteria": "It works!",
                "description": "testing something",
                "id": "2",
                "reporter": "1",
                "status": "Code Review",
                "title": "Second Story",
                "type": "Enhancement"
            }
        ];

        storyboard.types = [
            {name: "Spike"},
            {name: "Enhancement"}
        ];

        storyboard.users = [
            {id: "1", name: "User1"},
            {id: "2", name: "User2"}
        ];

        storyboard.statuses = [
            {name: 'To Do'},
            {name: 'In Progress'},
            {name: 'Code Review'},
            {name: 'QA Review'},
            {name: 'Verified'}
        ];
    });

以及以下HTML模板：

<div class="list-area">
    <div class="list-wrapper">
        <ul class="list" ng-repeat="status in storyboard.statuses">
            <h3 class="status">{{status.name}}</h3>
            <hr/>
            <li class="story" ng-repeat="story in storyboard.stories | filter: {status:status.name}" ng-click="storyboard.setCurrentStory(story)">
                <article>
                    <div>
                        <button type="button" class="close">×</button>
                        <p class="title">{{story.title}}</p>
                    </div>
                    <div class="type-bar {{story.type}}"></div>
                    <div>
                        <p>{{story.description}}</p>
                    </div>
                </article>
            </li>
        </ul>
    </div>
</div>

<div class="details">
    <h3>Card Details</h3>
    <form name="storyboard.detailsForm">
        <div class="form-group">
            <div class="controls">
                <label class="control-label" for="inputTitle">Title</label>
                <input type="text" id="inputTitle" name="inputTitle" placeholder="Title"
                        ng-model="storyboard.editedStory.title" ng-required="true"
                        ng-minlength="3" ng-maxlength="30" class="form-control">

                <label class="control-label" for="inputStatus">Status</label>
                <select id="inputStatus" name="inputStatus"
                        ng-model="storyboard.editedStory.status"
                        ng-options="status.name as status.name for status in storyboard.statuses"
                        class="form-control">
                    <option value="">Please select...</option>
                </select>

                <label class="control-label" for="inputReporter">Reporter</label>
                <select id="inputReporter" name="inputReporter"
                        ng-model="storyboard.editedStory.reporter" ng-required="true"
                        ng-options="user.id as user.name for user in storyboard.users"
                        class="form-control">
                    <option value="">Please select...</option>
                </select>

                <label class="control-label" for="inputType">Type</label>
                <select id="inputType" name="inputType"
                        ng-model="storyboard.editedStory.type" ng-required="true"
                        ng-options="type.name as type.name for type in storyboard.types"
                        class="form-control">
                    <option value="" disabled selected>Please select...</option>
                </select>
            </div>
        </div>
    </form>
    <div ng-if="storyboard.currentStory">
        <button class="btn btn-default ng-click="storyboard.updateCancel()">Cancel</button>
        <button class="btn pull-right btn-default" ng-disabled="!storyboard.detailsForm.$valid" ng-click="storyboard.updateStory()">Update Story</button>
    </div>
</div>

{{status.name}


×
{{story.title}
{{story.description}}



卡片详细信息
标题
地位
请选择。。。
记者
请选择。。。
类型
请选择。。。
ng选项
语法可以理解为
值作为项中项的文本

如果您不使用作为部分（导致项目

中的项目出现

文本，值部分缺失），则
项目
本身（对象）将绑定到
选项
（通过以下示例确认），最后，空选项被设置为选中，因为angular无法匹配任何值为bind to
ng model
的选项


角度模块（“应用程序”，[]）
.controller（“myCtrl”，函数（$scope）{
$scope.default1=1；
$scope.default2=1；
$scope.data=[
{
id:1，
名称：“名称1”
},{
id:2，
名称：“名称2”
},{
id:3，
名称：'name3'
}
];
});

更改选项以查看绑定到选项的内容
请选择。。。
{{default1}}

请选择。。。
{{default2}}

<select id="inputType" name="inputType"
        ng-model="storyboard.editedStory.type" ng-required="true"
        ng-options="type.name for type in storyboard.types"
        class="form-control">
        <option value="" disabled selected>Please select...</option>
</select>