angularjs - 选择 ng-model 索引答案

【问题标题】：angularjs - select's ng-model indexangularjs - 选择 ng-model 索引
【发布时间】：2017-01-03 17:34:48
【问题描述】：

我正在尝试在选择控件中获取所有选定的项目，例如其值或标题。基本上，在用户从选择控件中选择了他/她想要的项目后，我想获取所选项目的数量及其标题或值。

在我的html页面中，我有以下代码sn-p：

  <select ng-model="selectedValues" multiple>
            <option >All Booth</option>
            <option> Washroom</option>    
 </select>

 <button ng-click="apply()" type="button">Apply</button>

在我的控制器中，我有以下代码 sn-p：

$scope.apply = function () {
// Get the number of selected items and its title or value


}

有谁知道我可以做到这一点的方法吗？谢谢。

【问题讨论】：

$scope.selectedValues.count?

标签： javascript angularjs angularjs-scope

【解决方案1】：

请查看演示：

angular.module('app', [])

.controller('appCtrl', function ($scope) {

    $scope.apply = function () {
        if ($scope.selectedValues != undefined && $scope.selectedValues.length > 0) {
            // Get the number of selected items and its title or value
            var selectedTitles = $scope.selectedValues;//Get title or value
            var noSelectedItems = $scope.selectedValues.length;//Get the number of selected items

            console.log("Total items selected :" + noSelectedItems + " titles '" + selectedTitles.toString() + "'");
        }
        else {
            console.log("No item selected");
        }
    }

});

<!DOCTYPE html>
<html>

  <head>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
   
  </head>

  <body ng-app="app" ng-controller="appCtrl">
     <select ng-model="selectedValues" multiple>
            <option>All Booth</option>
            <option>Washroom</option>    
 </select>

 <button ng-click="apply()" type="button">Apply</button>
  </body>

</html>

【讨论】：

嗨，我按照你给我的代码，但是 $scope.selectedValues.length 给了我错误“TypeError: Cannot read property 'length' of undefined”。
我尝试使用 console.log 检查 $scope.selectedValues 是已定义还是未定义。我发现它是未定义的。奇怪的。我实际上已经选择了一个项目，它说未定义。
一旦您选择值 $scope.selectedValues 将被初始化并且您不会得到未定义。你能创造小提琴吗？所以我可以调试你的代码
嗨，这是我的 fiddler，包含代码 sn-p（请注意，所有模块、控制器和必要的脚本都已包含在我的项目中，但我没有放入 fiddler）jsfiddle.net/pn2qL/29/#&togetherjs=9NboyQyd61
嗨请注意不在 ng-controller="NavigationCtrl" 和 ng-app= “起动机”。请在
中放置按钮。然后试试！！

【解决方案2】：

如果处理angularjs 中的select 元素而不是ng-repeat，则使用ngOptions 属性。有关更多信息，请单击 here 获取 ngOptions 文档。

工作演示：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl',function($scope) {

    $scope.items = [
    {
      title: 'All Booth',
      value: 'All Booth'
    },
    {
      title: 'Washroom',
      value: 'Washroom'
    }
    ];
    $scope.apply = function(selectedValues) {
      var selectedValuesLength = selectedValues.length;
      console.log(selectedValuesLength); // selected items count
      for(var i in selectedValues) {
        console.log(selectedValues[i]); // selected items title
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <select multiple="true" ng-model="selectedValues" ng-options="item.value as item.title for item in items">
    </select>
    <button ng-click="apply(selectedValues)" type="button">Apply</button>
</div>

【讨论】：