CODEWITHSUNDEEP
javascriptjqueryangularjs
Quicksting
Quicksting

Reputation: 61

Selecting Select Box Option from Controller

I did a lot of searching and tried eleventy-billion different Google search combinations, but all I can find on this issue is how to set a default option in a select box.

I have a page where an admin can select a user from a list of users, and then Angular JS grabs the user_id of that user (using ng-change), sends it to the DB via POST, and then the goal is to change the value of the other inputs to the values from the DB. I have the values, but running into a hitch when using that value to get my state select box to change to the user's state.

The JS in question:

$scope.getUserInfo = function(user_id) {
                this.user_id = user_id;
                $http.post("lib/scripts/managing_user.php", {func: 'retrieve_user_info', user_id: this.user_id}).
                    success(function(data) {
                        console.log(data);
                        $scope.is_active = data['0']['active'];
                        //Interacts with the ng-checked directive. It takes a bool, and data returns 0 or 1 in active.
                        $scope.username = data['0']['username'];
                        //Assigns the data value to the ng-model directive with the value username
                        //Have to treat data as a 2D array because that is how it is returned
                        $scope.email = data['0']['email'];
                        $scope.fName = data['0']['first_name'];
                        $scope.lName = data['0']['last_name'];
                        $scope.schoolList = data['0']['school_id']; (<-Does not work)
                    }).

I accomplished the same thing using jQuery before. Here is the code if it helps you see what I want to do.

if ($("#school").children("option:selected"))
                    $("#school").children("option:selected").attr("selected", "false");
                $("#school #" + this['school_id'] + "").attr("selected", "true");

Here is the Select Box that I want changed.

<div class="row-fluid">
   <span class="adduser_heading">School:</span>
   <select id="school" class="adduser_input" ng-model="user.schoolList" ng-options="name.school_name for (key, name) in schoolList" ng-disabled="is_disabled" name="school" style="width: 246px;"></select>
</div>

I get the list of schools from the DB, and that populates that list. After selecting a user, I want this select box to change to that user's school. The ultimate goal is for the admin to be able to change the selected school and submit it, changing the school in the DB.

Hope I described the problem adequately. Basically: I want to select an option in a select box from the JS using Angular JS.

Edit: As per the advice of oware, I created a function that gets just the school name from the object array and returns it to $scope.user.schoolList. Unfortunately, that did not work.

$scope.user.schoolList =  $scope.findInSchoolList(data['0']['school_id']);

$scope.findInSchoolList = function(school_id) {
                var school_id = school_id;
                var school;
                school = $scope.schoolList[school_id];
                school = school['school_name'];
                return school;
            };

And here is the format of what is returned from the DB with regards to school. I don't really want to post "data" since that has the information of an actual person. Basically, the information with regards to school is what is below.

school_id: "106"
school_name: "Central Campus High School"

Upvotes: 0

Views: 138

Answers (2)

Shomz
Shomz

Reputation: 37691

Your ng-model is set to user.schoolList, while you're assigning the default value to $scope.schoolList.

It should be $scope.user.schoolList instead.

If you want to use the find function, you still need to return the right object, not just the name; and you need to fix your function. So something like this should work: 

$scope.findInSchoolList = function(school_id) {
    for(var i = 0; i < $scope.schoolList.length; i++) {
        if ($scope.schoolList[i].school_id == school_id) {
           return $scope.schoolList[i];
        }
    }
};

Here's a working example: 

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    var findInSchoolList = function(school_id) {
      for (var i = 0; i < $scope.schoolList.length; i++) {
        if ($scope.schoolList[i].school_id == school_id) {
          return $scope.schoolList[i];
        }
      }
    };

    $scope.schoolList = [{
      school_id: "1",
      school_name: "Central Campus High School"
    }, {
      school_id: "106",
      school_name: "Another High School"
    }, {
      school_id: "231",
      school_name: "Yet Another High School"
    }, {
      school_id: "23",
      school_name: "The Correct High School"
    }, {
      school_id: "2",
      school_name: "Last High School"
    }]


    $scope.user = {
      schoolList: findInSchoolList(23)
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row-fluid" ng-app="app" ng-controller="Ctrl">
  <span class="adduser_heading">School:</span>
  <select id="school" class="adduser_input" ng-model="user.schoolList" ng-options="name.school_name for (key, name) in schoolList" ng-disabled="is_disabled" name="school" style="width: 246px;"></select>
</div>

Upvotes: 1

oware
oware

Reputation: 706

you have to select the item from the array that populated the list, for example, if you have:

$scope.school_list = [{id:1, name:'harvard'}, {id:2, name:'other'}]

and you want to select with:

$scope.user.schoolList = {id:1, name:'harvard'}

it won't work, you have to make a fucntion that finds the element in the array and then assign it to the $scope.user.schoolList variable (that is bound to the ng-model of your list)

you have to do something like this:

$scope.user.schoolList = findInSchoolList({id:1, name:'harvard'})

and it will select the item from the select list

hope it helps

Upvotes: 1

Related Questions