Angular js中ng- select的问题

TRY THIS CODE

<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)">

解决方案如下。

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

ng-model = "selected"

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

下面是演示

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>
  

根据我的理解，我认为你需要在第一时间显示默认的product2选项。一旦你改变了选项的值，它就不会像在代码片段中那样起作用。将代码更改为

<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版本不再支持它。您的代码片段正在工作，因为您使用的是1.1。如果你正在使用新版本，你应该看看这个声明。

你不应该使用数组值作为模型。

创建一个额外的变量来保存选定的值，并将其用作方法的参数。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>

JS

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