Question

我偶然发现了angularjs的问题。我最近开始学习它，但遇到了一个问题。我找到了一些有相同问题的人，但他们在大多数情况下执行的编码方式与我的完全不同。所以，我能够把东西放在一起。在任何情况下，这都是我想要做的：在我的表单中，下拉菜单会自动选择第一个选项，由于某种原因这是空白的（与angularjs默认保护或某事有关）。

在尝试下面的代码之前，代码到目前为止一直在正常工作。现在，表格的最后一部分，如下图所示的星星，总是打开，无论什么时候实际上它应该只在被问到时打开。此外，由于编码错误，即使该部分也不能正常工作（因为编码错误）。我相信通过纠正下面代码中的主要问题，所有的小问题都将在此过程中自行解决。

无论如何，这是下面的HTML（后跟js部分）：

<blockquote ng-repeat="review in product.reviews">
                <b>Stars: {{select.stars}}</b>
                {{review.body}}
                <cite>by:  {{review.author}}</cite>
            </blockquote>

            <form name="reviewForm">

            <blockquote>
                <b> Stars: {{select.stars}}</b>
                <br/>
                <b> Review: {{review.body}}</b>
                <br/>
                <cite>by: {{review.author}}</cite>
            </blockquote>

                <!--<select ng-controller="starsController" ng-model="review.stars" name="stars" id="stars" style="margin-bottom:10px;margin-left:36px;width:350px;">-->

                <select ng-controller="starsController" ng-model="select" name="stars" id="stars"  ng-options="option.name for option  in typeOptions">
                    <optgroup label="Rate the product">
                     <option value="1 star" name="1 star">1 star</option>
                    <option value="2 stars" name="2 stars">2 stars</option>
                    <option value="3 stars" name="3 stars">3 stars</option>
                    <option value="4 stars" name="4 stars">4 stars</option>
                    <option value="5 stars" name="5 stars" selected="selected">5 stars</option>
                    </optgroup>
                </select>

JS

app.controller("starsController", 
function MyCtrl($scope) {

    $scope.typeOptions = [
    { name: '1 star', value: '1 star' }, 
    { name: '2 stars', value: '2 stars' }, 
    { name: '3 stars', value: '3 stars' },
    { name: '4 stars', value: '4 stars' },
    { name: '5 stars', value: '5 stars' }
    ];

    $scope.select = $scope.typeOptions[4];

    }
    );

Answer 1

我会做这样的事情：

HTML：

<select ng-model="select" ng-options="option.name for option  in typeOptions"></select>

JS：

$scope.typeOptions = [
{ name: '1 star', value: '1 star' }, 
{ name: '2 stars', value: '2 stars' }, 
{ name: '3 stars', value: '3 stars' },
{ name: '4 stars', value: '4 stars' },
{ name: '5 stars', value: '5 stars' }
];

$scope.select = $scope.typeOptions[4];

Pluker

Select documentation on docs.angularjs

下拉菜单上的angularjs空选择

1 个答案: