Question

我对角度很新，所以希望这对于某人来说是一个非常简单的问题。

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

标准字段一切顺利，但我遇到了<select>个字段的障碍。

<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>

这是js：

angular.module('jobcreate', []).controller('JobCtrl', function($scope) {
        $scope.templates = [
            {ID:'default', name:'Default'},
            {ID:'obnoxious', name:'Obnoxious'}
        ];

    });

我在这里有一个jsfiddle，所以你可以看到它的实际效果：http://jsfiddle.net/2m8jm/4/

正如您所看到的，在标题字段中输入内容按预期工作，但我很难获得$scope.colors的内容以填写选择字段

Answer 1

在您的小提琴：http://jsfiddle.net/2m8jm/4/中，您选择templates作为ng-options的数据数组，但控制器templates中没有名为JobCtrl的范围变量}。我已将$scope.colors重命名为$scope.templates并修改了ng-options位 - ng-options="template.ID as template.name for template in templates"。

这是一个工作的掠夺者：http://plnkr.co/edit/wsbxkjRqTEU2yfcHOV0D?p=preview

<强>更新

Is there a way to not have the first empty value be in the select field?

是的，有几种方式。

1）使用标记中的某个默认值初始化job.template：

<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>

2）按如下方式定义控制器，在job.template内设置controller的默认值：

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

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

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

1 个答案: