默认值同时可能使用 ngrepeat 将整个对象项设置为功能 AngularJS答案

【问题标题】：Default value at the same time possibility seding whole object item with ngrepeat to function AngularJS默认值同时可能使用 ngrepeat 将整个对象项设置为功能 AngularJS
【发布时间】：2017-11-15 13:35:50
【问题描述】：

我正在尝试将参数传递给函数 changeBoard 整个变量项，但如果我没有设置 value="item._id" 我不能有默认值。如果我设置我只能通过 item._id。

有人可以帮我如何在默认选中的同时传递整个参数项吗？

demo

https://codepen.io/Turqus/pen/LOjvLL?editors=1111

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

模板 html

<div ng-app="test" ng-controller="select">

 <select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
     <option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>   
 </select>

</div>

控制器

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


app.controller('select', $scope=>{
  $scope.arrayItems = [
    {'id': '133', 'name':'first', 'lists':[{'name': 1}, {'name': 2}]},
    {'id': '134', 'name':'second', 'lists':[{'name': 1}, {'name': 2}]},
    {'id': '135', 'name':'third', 'lists':[{'name': 1}, {'name': 2}]},
    {'id': '136', 'name':'fourth', 'lists':[{'name': 1}, {'name': 2}]}
  ];

  $scope.selectedBoard = '134';

  $scope.changeBoard = (selectedBoard) => {
    console.log(selectedBoard)
  }
});

【问题讨论】：

你想要一个默认值吗？或者想要ng-model 等于selectedBoard 模型？或者想打印出正在更改的模型，$scope.arrayItems 中的对象？请澄清。
我希望通过 id 在选择值中进行选择，同时我希望在自动更改选择位置后有可能我希望将 {{item}} 从 ng-repeat 发送到功能。你明白吗？？

标签： angularjs

【解决方案1】：

您可以使用 Javascript 函数.filter()。它有点像 SQL WHERE 语句，但用于 Javascript 数组。它只会根据给定的功能过滤掉任何东西。

在我的示例中，您可以在 ng-change 方法中将 selectedBoard 传递给函数调用。由于您已经绑定到模型$scope.selectedBoard。

! function() {

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

  var select = function($scope) {
    $scope.arrayItems = [{
        'id': '133',
        'name': 'first',
        'lists': [{
          'name': 1
        }, {
          'name': 2
        }]
      },
      {
        'id': '134',
        'name': 'second',
        'lists': [{
          'name': 1
        }, {
          'name': 2
        }]
      },
      {
        'id': '135',
        'name': 'third',
        'lists': [{
          'name': 1
        }, {
          'name': 2
        }]
      },
      {
        'id': '136',
        'name': 'fourth',
        'lists': [{
          'name': 1
        }, {
          'name': 2
        }]
      }
    ];

    $scope.selectedBoard = '';

    $scope.changeBoard = () => {
      var obj = $scope.arrayItems.filter(item => item.id == $scope.selectedBoard);
      // var obj = $scope.arrayItems.filter(function(item) { // Can also be written as this
      //   return item.id == $scope.selectedBoard;
      // });
      console.log(obj);
    }
  };

  app.controller("select", ["$scope", select]);
}();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test" ng-controller="select">

  <select class="form-control" ng-model="selectedBoard" ng-change="changeBoard()">
     <option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>   
 </select>

</div>

【讨论】：