Question

我的网页上有两个选择框，当从第一个选择状态时，我使用Angular加载第二个选项。首次加载页面时，第二个选择框有一个项目Select state...，在第一个项目发生更改后，我希望它更改为Select...。

是否可以通过Angular访问DOM元素以进行此更改，或者我必须像在此示例中一样使用完整的jQuery选择器：

$scope.$watch('state', function() {
    $http.get('institutions?state=' + $scope.state).success(function(institutions) {
        $scope.institutionOptions = institutions;

        // Would like to avoid this jQuery selector if possible...
        $('[name=institution_id] option:first').html('Select...');
    });
}, true);

Answer 1

我认为你应该尽可能坚持数据绑定。绑定到$scope.message：

JS：

$scope.message = "initial message"

HTML：

<select ng-model="selected" ng-options="c.o for c in options">
  <option value="">{{message}}</option>
</select>

收到数据后，只需更改message：

即可

$scope.message = "select...";
$scope.options = [{o:"option1"},{o:"option2"}, {o:"option3"} ]

看到这个plunker：http://plnkr.co/edit/DzC5V3tlEuKZHsEVxIBx?p=preview

Answer 2

您可以使用angular.element api。如果存在，它使用jquery。

但是你不应该访问控制器内的DOM。如果在不操作DOM的情况下无法执行此操作，请尝试将此代码封装在指令中。

在Angular.JS中获取监视事件的DOM元素

2 个答案: