Javascript 如何将范围中的数据添加到选择框

我对angular还比较陌生，所以希望这是一个超级简单的问题，有人可以回答

我有一个表单（下面的简化版本），我希望能够在用户填写表单时显示实时预览

标准字段一切顺利，但我遇到了

字段的障碍

<div ng-app="jobcreate">
    <div class="row fullWidth" ng-contoller="JobCtrl">

        <div class="medium-6 columns">

            <form method="POST" action="http://localhost:3030/job/create" accept-charset="UTF-8">

                <label for="title">Enter a title</label>
                <input placeholder="title" id="title" required="required" ng-model="job.title" name="title" type="text" />

                <br />
                <label for="title">Pick template</label> 
                <select ng-model="job.template" ng-options="template.Name for template in templates" name="template"></select>

            </form>     

        </div>

        <div class="medium-6 columns">

            <div class='job-detail {{ job.template || "default" }}'>
                <h2>{{ job.title || "Enter a title"}}</h2>
                <h2>{{ job.template || "Pick a template"}}</h2>
                <pre>Templates: {{templates | json}}</pre>

            </div>

        </div>
    </div>
</div>

我这里有一个jsfiddle，因此您可以看到它的运行：

如您所见，在标题字段中输入某些内容可以按预期工作，但我正在努力获取

$scope.colors

的内容以填充小提琴中的选择字段：，您选择了

模板

作为

ng选项

的数据数组，但在控制器

JobCtrl

中没有名为

templates

的作用域变量。我已将

$scope.colors

重命名为

$scope.templates

，并修改了

ng选项
bit-
ng options=“template.ID as template.name for templates in templates”

这是一个正在工作的plunker：

更新

有没有办法不让第一个空值出现在选择字段中？

是的，有两种方法

1） 使用标记中的某些默认值初始化
job.template
，如下所示：

.controller('JobCtrl', function($scope) {
     // some other codes        

    $scope.job = {};
    $scope.job.template = 'default';  
});

您的标记中有一个输入错误（这里还有fiddle）<代码>ng控制器
应该是
ng控制器
oh man。。。我一直在为这个扯头发。。。请随意将此作为一个完整的回答。谢谢，在创建小提琴时，这是一个输入错误，但如果发现控制器输入错误，则授予答案。有没有办法不让第一个空值出现在select字段中？
<label for="title" ng-init="job.template='obnoxious'">Pick template</label> 
<select ng-model="job.template" ng-options="template.ID as template.name for template in templates" name="template"></select>

.controller('JobCtrl', function($scope) {
     // some other codes        

    $scope.job = {};
    $scope.job.template = 'default';  
});