Problems executing jQuery statement when changing Angular template

Question

I'm working on a single page application that has 2 views: home, and a dashboard.

The 'home' state has a search form. When the form is submitted, the dashboard view is loaded using $window.location.assign('/#/dashboard');.

When the dashboard view is loaded from the search, I need to automatically set a select box value to 0. I have the code to do this, but for some reason, it is not executing when the page loads... I'm thinking this has something to do with Angular adding the new 'select' DOM element to the page when it loads.

dashboard view

  <div ng-controller="MainCtrl">

    <!-- list all lists -->
    <select id="list-select" class="list-select" ng-model="list" ng-options="list as list.title for list in lists">
        <option value="">Select List</option>
        <!-- when the page loads from search, this will be added...
        <option value="0">search</option>
        -->
    </select>
    <!-- end list -->

    <hr class="dash">

      <!-- words in selected list -->
      <ol ng-model="list.words">
        <li ng-repeat="word in list.words" id="word-{{word.id}}">
          <p>{{ word.title }}</p>
        </li>
      </ol>
    <!-- end words -->

</div>

main.js

$("#list-select").val("0");

Please help!

I tried the $location.path service but it was not working so I just used $window.assign, is this related to the question/solution? — Kyle, May 24 '15 at 23:17
Interesting, I probably jumped the gun in blurting that out :]. It's probably not related to the solution, just a stylistic observation. You can disregard. — Danny Bullis, May 24 '15 at 23:30

score 2 · Answer 1 · edited May 23 '17 at 12:21

There's a very similar question here: how to use ng-option to set default value of select element

Rather than using jQuery to try to set the default value of your select list, perhaps you can stick to the angular approach:

<div ng-controller="yourController">
    <select ng-model="prop.value" ng-options="v for v in prop.values">
    </select>
</div>

yourApp.controller('yourController', ['$scope', '$http', function($scope, $http) {
    $scope.prop = { 
        value: 0, 
        values: []
    };

    // not the best way...
    $.getJSON('yourURL', function(data) {
        $scope.prop.values = data;
        $scope.$apply(); // you need to call this
    });

    // the better way
    $http.get('yourURL').success(function(data) {
        $scope.prop.values = data;
    }).error(function(error) {});
}]);

I can't use this because the list values are dynamically generated — Kyle, May 24 '15 at 23:46
why would that make a difference? Are you generating the values in a jquery async request? One of the major selling points of angular is that it works well when binding to dynamically generated data. — Danny Bullis, May 25 '15 at 23:23

score 1 · Answer 2 · answered May 25 '15 at 00:00

Generally, it's bad practice to manipulate the DOM within your controller. Your changes won't stick whenever the model updates, and it can cause a lot of problems within your controller logic.

Instead, you'll want to manipulate the variable(s) that you're utilizing within your view. In this case, you can do something like the following within your controller after the lists array is populated:

$scope.lists.splice(0,0,{ value: 0, title: 'search' });

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

I was pretty much just looking for a way to set a default value for the select box.

I was able to accomplish this with ng-init, based on this answer.

   <!-- list all lists -->
  <select ng-model="list" ng-init="list = lists[0]" ng-options="list as list.title for list in lists">
      <option value="">Select List</option>
  </select>
  <!-- end list -->

This sets the select box value to "0".

Thanks for all the help and tips, going to mark this as the correct answer.

edited May 23 '17 at 12:30

Community

1
1

answered May 25 '15 at 02:57

Kyle

1,153
5
28
56

Just FYI, this is bad practice. If I were you, I wouldn't mark this as the correct answer unless you want to lead people astray. http://stackoverflow.com/questions/20546819/correct-way-to-initialise-scope-values-when-the-view-is-loaded-with-angularjs-n – Danny Bullis May 25 '15 at 23:30

Problems executing jQuery statement when changing Angular template

3 Answers3