Question

我在ng-options中保存了一些值，当您选择元素时，它没有为框提供正确的值，我想使用<option>元素更改该元素的高度和宽度。

我的HTML：

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select
                ng-options="p.first + ' x ' + p.last for p in people"
                ng-model="selectedPerson"></select>

        {{ selectedPerson.first }} x {{ selectedPerson.last }}
    </fieldset>

    <div class="box" ng-style="{'width' : selectedPerson.first}">

    </div>
</div>

JS：

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.people = [
        { id: 1, first: 100, last: 200 },
        { id: 2, first: 200, last: 300 },
        { id: 3, first: 300, last: 400 },
        { id: 4, first: 400, last: 500 }
    ];
});

用于示例的小提琴： http://jsfiddle.net/a6p1fL7m/

Answer 1

由于您的字段集上有一个控制器，它有一个单独的范围，它的兄弟姐妹无法使用。例如，如果您将div放在字段集中，并将'px'添加到其工作的宽度（fiddle）：

<fieldset ng-controller="FirstCtrl">
    <select
            ng-options="p.first + ' x ' + p.last for p in people"
            ng-model="selectedPerson"></select>

    {{ selectedPerson.first }} x {{ selectedPerson.last }}
    <div class="box" ng-style="{'width' : selectedPerson.first + 'px'}">
      selectedPerson: {{selectedPerson|json}}
    </div>
</fieldset>

我总是觉得调试使用| json过滤器将值抛到那里很方便，以确保该值在我认为应该是正确的位置。您还可以使用AngularJS Batarang chrome扩展程序来帮助调试示波器。

选择元素时，Ng-options不应用值

1 个答案: