Angularjs中的ng-select问题？答案

【问题标题】：Issue with ng-slelect in Angular js?Angularjs中的ng-select问题？
【发布时间】：2016-09-02 17:42:20
【问题描述】：

我有类似的数组

JS：

$scope.array = [
{
 "column":"productdivisiondes",
 "dataType":"varchar",
 "displayName":"Product 2"
 },
 {
 "column":"productdivisiondes",
 "dataType":"varchar",
  "displayName":"Product3"
 },
{
"column":"productdivisiondes",
"dataType":"varchar",
"displayName":"Product5"
}]

HTML 代码：

 <select class="form-control inline" 
      ng-model="array[0]" 
      ng-options="option.displayName for option in array">
  </select>

这是我正在处理的 Fiddle

我想在我的选择中使用默认的ng-model="product2"。它完成了

我的问题是，如果我选择 product3 或 product5，那么我的下拉值将更改为 product 3、product 5、product 3。

请帮我做。

【问题讨论】：

我没有得到你的场景女士。请您详细说明一下？

标签： javascript angularjs arrays

【解决方案1】：

试试这个代码

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <select class="form-control inline" 
          ng-model="option.displayName" 
          ng-options="option.displayName for option in array">
      </select>
  <button class="btn btn-primary btn-sm p-l-6 p-r-6 p-t-3 p-b-3" ng-click="addToSearch(option.displayName)">

【讨论】：

【解决方案2】：

这是解决方案。

不要将ng-model 赋予现有数组的值。这也将更新数组。 ng-model 不是变量。给ng-model一个变量名，并通过

初始化该变量的值

ng-model = "selected"

$scope.selected = $scope.array[0]

这是工作 Demo

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.array = [{"column":"productdivisiondes",
                   "dataType":"varchar",
                   "displayName":"Product 2"},
                   {"column":"productdivisiondes",
                   "dataType":"varchar",
                   "displayName":"Product3"},
                   {"column":"productdivisiondes",
                   "dataType":"varchar",
                   "displayName":"Product5"}]
                   
    $scope.selected = $scope.array[0] //initializing the ng-model
    
    $scope.addToSearch = function(searchval) {
      console.log(searchval, 'searchval')
    }
}

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <select class="form-control inline" 
          ng-model="selected" 
          ng-options="option.displayName for option in array">
      </select>
  <button class="btn btn-primary btn-sm p-l-6 p-r-6 p-t-3 p-b-3" ng-click="addToSearch(array[0])">
        Add
      </button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

【讨论】：

【解决方案3】：

根据我的理解，我认为您需要在第一时间显示默认的product2 选项。一旦您更改了选项值，它就不应该像在您的 sn-p 中那样影响它。将代码更改为以下一个

<select class="form-control inline" 
          ng-model="nameDisplay" 
          ng-options="option.displayName for option in array">
      </select>

在你的控制器中

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.array = [{"column":"productdivisiondes",
                   "dataType":"varchar",
                   "displayName":"Product 2"},
                   {"column":"productdivisiondes",
                   "dataType":"varchar",
                   "displayName":"Product3"},
                   {"column":"productdivisiondes",
                   "dataType":"varchar",
                   "displayName":"Product5"}];
    $scope.nameDisplay = $scope.array[0]; //Assign the first value of array 

    $scope.addToSearch = function(searchval) {
       console.log(searchval, 'searchval')
    }
}

你应该在这里记住一件事。您正在全局声明控制器。 Angular 的 >= 1.3 版本不再支持它。您的 sn-p 正在工作，因为您使用的是1.1。如果您继续使用新版本，您应该查看this 声明。

【讨论】：

【解决方案4】：

您不应该将数组值用作模型。

创建一个附加变量来保存所选值，并将其用作方法的参数。 HTML

<div ng-controller="MyCtrl">
    Hello, {{name}}!
  <select class="form-control inline" 
          ng-model="selection" 
          ng-options="option.displayName for option in array">
      </select>
  <button class="btn btn-primary btn-sm p-l-6 p-r-6 p-t-3 p-b-3" 
                              ng-click="addToSearch(selection)">
        Add
      </button>
</div>

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.array = [{"column":"productdivisiondes",
               "dataType":"varchar",
               "displayName":"Product 2"},
               {"column":"productdivisiondes",
               "dataType":"varchar",
               "displayName":"Product3"},
               {"column":"productdivisiondes",
               "dataType":"varchar",
               "displayName":"Product5"}]

   // variable to hold the selection               
   $scope.selection = $scope.array[0];

   $scope.addToSearch = function(searchval) {
       console.log(searchval, 'searchval')
   }
}

【讨论】：