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

Question

I have two select boxes on my web page, and when an state is chosen from the first one I use Angular to load in the options for the second. When the page first loads, the second select box has one item, Select state... and after the first item is changed, I want it to change to just Select... .

Is it possible to access the DOM element through Angular to make this change, or must I use a full-on jQuery selector as I do in this example:

$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

I think you should stick to data binding as much as possible. Bind to $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>

when you receive your data, just change the message :

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

see this plunker: http://plnkr.co/edit/DzC5V3tlEuKZHsEVxIBx?p=preview

Answer 2

You can use the angular.element api. It uses jquery if present.

But you shouldn't access the DOM inside the controller. If you can't do this without manipulating DOM, try to encapsulate this code inside a directive.