AngularJS

Question

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

这是下拉菜单的代码：

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

第一次工作正常，但如果我想 select 控制台中的另一个选项，我会收到以下错误，而且下拉列表不会 select 我想要的另一个选项到 select:

未捕获类型错误：无法设置未定义的属性 'selected'

我该如何解决这个问题？

非常感谢。

Answer 1

尝试改用 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>

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

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 事件因为用户 select 一个选项而被触发时，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 事件因为用户 select 一个选项而被触发时，search.country 具有 id 作为值。否则，如果用户点击 <abbr class="search-choice-close"></abbr>，则值为 null。

AngularJS - 选择的 localytics ng-change 不工作

AngularJS - Chosen localytics ng-change not working

angularjs-ng-change

angular-chosen