Question

我正在尝试检测何时从AngularJS选择的localytics下拉列表中选择一个选项。

以下是下拉列表的代码：

<select chosen data-placeholder="Buscar..." 
    class="w-100" 
    ng-model = "medSearchType"
    ng-change = "changeMedSearch(medSearchType)">
        <option value="Medicamento">Medicamento</option>
        <option value="Componente">Componentes Activos</option>
</select>

在我的控制器中，我有以下功能：

$scope.changeMedSearch = function (searchType) {
    console.log(searchType);
}

第一次工作正常，但是如果我想在控制台中选择另一个选项，我会收到以下错误，而且下拉菜单不会选择我想要选择的其他选项：

未捕获的TypeError：无法设置未定义属性“已选择”

我该如何解决这个问题？

非常感谢。

Answer 1

script.js

App.controller('permissionManagerController', ['$scope', '$http', '$q', 'ngToast', '$uibModal', '$window', 'permissionManagerRepository', function ($scope, $http, $q, ngToast, $uibModal, $window, PermissionManagerRepository) {

    var ctrl = this;

    // Variables
    $scope.testitem = 103; 
    $scope.search = {
        country: null,
        ...
    };
    $scope.lists = {
        countries : [],
        ...
    };
    // Methods
    ctrl.init = function () {
        var promises = {
            countries: PermissionManagerRepository.getCountries(),
            ...
        };
        $q.all(promises).then(function succes(values) {
            $scope.lists.countries = values.countries;
            ...
        }, function errorCallback(xhr, ajaxOptions, thrownError) {
            console.log("REST API call failed with status: " + xhr.status + " and error: " + thrownError);
        });
    };
    // Utilities
    $scope.reloadAffiliates = function (idCountry) {
        $scope.search.country = country;
        if (idCountry) {
            var promises = {
                affilates: PermissionManagerRepository.getAffiliatesByCountry(idCountry)
            };
            $q.all(promises).then(function succes(values) {
                $scope.lists.affilates = values.affilates;
            }, function errorCallback(xhr, ajaxOptions, thrownError) {
                console.log("REST API call failed with status: " + xhr.status + " and error: " + thrownError);
            });
        }   
    };
}]);

不可行示例

<select chosen
        data-placeholder-text-single="'Chose countries...'"
        allow-single-deselect="true"
        search-contains="true"
        class="form-control"
        ng-model="search.country"
        ng-options="ct.IdCountry as ct.CountryNm for ct in lists.countries"
        ng-change="reloadAffiliates(search.country)">
</select>

在这种情况下，由于用户选择一个选项而触发了 change 事件时， search.country 的ID为值。否则，如果用户单击<abbr class="search-choice-close"></abbr>，则值不是null，而是分配给变量的最后一个值。

工作示例

<select chosen
        data-placeholder-text-single="'Chose countries...'"
        allow-single-deselect="true"
        search-contains="true"
        class="form-control"
        ng-model="search.country"
        ng-options="ct.IdCountry as ct.CountryNm for ct in lists.countries"
        ng-change="reloadAffiliates(search.country)">
    <option value=""></option>
</select>

在这种情况下，由于用户选择一个选项而触发了 change 事件时， search.country 的ID为值。否则，如果用户单击<abbr class="search-choice-close"></abbr>，则值为null。

Answer 2

我遵循了MrJSingh的建议并使用了ng-options，但问题仍然存在。

我添加了一个空的，它终于工作了

<select chosen data-placeholder="Buscar..." 
     ng-model = "medSearch"
     ng-change = "changeMedSearch(medSearch)"
     ng-options = "size as size for size in medSearchTypes">
     <option></option>
</select>

Answer 3

尝试使用ng-options。

angular.module("app",[]).controller("ctrl",function($scope){
    $scope.items = [1,2,3,4,5,6]
    $scope.changeMedSearch = function(medSearchType){
      alert(medSearchType)
    }
  })

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  
</head>
<body ng-app="app" ng-controller="ctrl">
  <select ng-model = "medSearchType"
    ng-change = "changeMedSearch(medSearchType)" ng-options="size as size for size in items" 
   ng-model="item" ng-change="update()"></select>
</body>
</html>

AngularJS - 选择的localytics ng-change无效

3 个答案: