Question

我做了很多搜索并尝试了十一亿种不同的Google搜索组合，但我在这个问题上找到的就是如何在选择框中设置默认选项。

我有一个页面，管理员可以从用户列表中选择用户，然后Angular JS抓取该用户的user_id（使用ng-change），通过POST将其发送到DB，然后目标是将其他输入的值更改为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;
            };

以下是关于学校的数据库返回的格式。我不想发布＆＃34;数据＆＃34;因为那里有真人的信息。基本上，关于学校的信息如下。

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

Answer 1

您的ng-model设置为user.schoolList，而您将默认值分配给$scope.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];
        }
    }
};

这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您必须从填充列表的数组中选择项目，例如，如果您有：

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

并且您想选择：

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

它不会起作用，你必须做一个在数组中找到元素的函数，然后将它分配给$ scope.user.schoolList变量（绑定到列表的ng-model）

你必须做这样的事情：

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

，它将从选择列表中选择项目

希望有所帮助

从Controller

2 个答案: