javascript - 从 Controller 中选择选择框选项

Question

我进行了大量搜索并尝试了 1100 亿种不同的 Google 搜索组合，但在这个问题上我所能找到的只是如何在选择框中设置默认选项。

我有一个页面，管理员可以从用户列表中选择一个用户，然后 Angular JS 获取该用户的 user_id(使用 ng-change)，通过 POST 将其发送到数据库，然后目标是将其他输入的值更改为 DB 中的值。我有这些值，但在使用该值将我的状态选择框更改为用户的状态时遇到了麻烦。

有问题的 JS:

$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)
                    }).

我之前使用 jQuery 完成了同样的事情。这是代码，如果它可以帮助您了解我想要做什么。

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

这是我想要更改的选择框。

<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>  

我从数据库中获取了学校列表，并将其填充到该列表中。选择用户后，我希望此选择框更改为该用户的学校。最终目标是管理员能够更改所选学校并提交，从而更改数据库中的学校。

希望我充分描述了问题。基本上:我想使用 Angular JS 在 JS 的选择框中选择一个选项。

编辑:根据oware的建议，我创建了一个函数，该函数仅从对象数组中获取学校名称并将其返回到$scope.user.schoolList。不幸的是，这不起作用。

$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;
            };

这是从数据库返回的有关学校的格式。我真的不想发布“数据”，因为它包含真实人的信息。基本上，有关学校的信息如下。

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

Answer 1

当您将默认值分配给 $scope.schoolList 时，您的 ng-model 设置为 user.schoolList。

应该改为$scope.user.schoolList。

<小时/>

如果你想使用find函数，你仍然需要返回正确的对象，而不仅仅是名称；并且您需要修复您的功能。所以这样的事情应该有效:

$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];
        }
    }
};

<小时/>

这是一个工作示例:

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>