表单：如何正确连接实时预览与控制器？ （AngularJS）

Question

像所有提出Angular JS问题的人一样，我的问题比简单的＆＃34;如何在下拉菜单中修复空白选项更深入了＃34;。基本上，我正在使用我正在创建的表单创建实时预览。这就是我的意思：

HTML中的初始blockquote基本上就是那里的实际评论。第二个blockquote是实际的LIVE预览。最后，第三部分是我所面临的困境。

DILEMMA： 这就是我所面临的困境：

通过从select标记中删除 ng-model =＆＃34; review.stars＆＃34; ，我的页面将按预期加载5颗星。但是，由于我需要绑定已经发布的评级，实时预览和5星的初始选择，我必须使用 ng-model =＆＃34; review.stars＆＃34; 来将所有东西捆绑在一起。

但是，现在发生的事情是，通过添加 ng-controller = starsController 以及ng-model，整个过程根本不起作用。我尝试过使用一些公式（其中一个看起来很有前途，一个使用 orderProp ），但是因为我需要绑定前面提到的三个东西，它会破坏代码和特定的部分。

我仍然可以从列表中选择一个选项，但预览无法显示。此外，它不会自动显示下拉列表中的第5颗星（我必须手动选择它）。

如果您希望获得视觉辅助以更好地理解我所解释的内容，请让我发布我所指的两种情况的图片。 This is the image via a link - I don't have enough rep to post it directly here :/

HTML

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

        <form name="reviewForm">

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


            <select ng-model="review.stars" ng-controller="starsController" name="stars" id="stars">

                <option style="display:none" value=""></option>                          
                <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>
            <br/>

JS

 app.controller('starsController', ['$scope', function($scope) {
      $scope.options = [
        { 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.orderProp = options[4];


}]);

Answer 1

Updated Plunker

要解决此问题，请在表单标记中添加ng-init =“review = {}”。

<form name="reviewForm" ng-init="review={}">

或者，甚至更好 - 将ng-controller移动到DOM树的更高位置（可能在表单元素上）

<form name="reviewForm" ng-controller="starsController">

或者是最佳选择，创建自定义reviewStars指令：

app.directive('reviewStars', function() {...});