Example

Question

当页面加载时，我想要select选项选择ng-model的值集。现在，它没有。当我更改输入框中的值时，它确实也会更改下拉值。

http://plnkr.co/edit/wOXkmXpLUCkzL5EYuP0W?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example94-production</title>

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



</head>
<body ng-app="selectExample">
    <script>
  angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.cars = [
        'Honda','Tesla','BMW','Toyota'
      ];
      $scope.myObj = {
        myColor:'13',
        myCat:'Tesla'
      };

      $scope.GetColorByCar=function(){
        if($scope.myObj.myCat === 'Honda'){
          $scope.colorsByCar = [
        {name:'black', id:11,bt:'Honda'},
        {name:'white', id:12,bt:'Honda'}];
        } else {
          $scope.colorsByCar = [
            {name:'xyz black', id:11,bt:'Tesla'},
            {name:'red', id:201,bt:'Tesla'},
            {name:'blue', id:301,bt:'Tesla'},
            {name:'yellow', id:411,bt:'BMW'}
            ];
        }
      };

    }]);
  </script>
  <div ng-controller="ExampleController">
    <input ng-model="myObj.myCat">
    <input ng-model="myObj.myColor"><br>
    Cars:
    <select ng-model="myObj.myCat" ng-click="GetColorByCar()">
      <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
    </select><br>
    Colors:
    <select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
    Currently selected: {{myObj.myCat}}
    Currently selected: {{myObj.myColor}}
  </div>
</body>
</html>

Answer 1

你需要做一些事情来实现这个目标

更改选择以使用ngOptions

<select ng-model="myObj.myCat" ng-options="car for car in cars" ng-click="GetColorByCar()"></select>

然后myObj.myCat需要引用汽车数组

$scope.myObj = {
    myColor: '201',
    myCat: $scope.cars[1]
};

最后，您需要注意myObj.myCat上的更改并在更改时运行代码

$scope.$watch('myObj.myCat', function() {
    ...
}

以下是更新plunker：http://plnkr.co/edit/Gl7vcBp4MpAJgtycQLUn?p=preview

Answer 2

我修复了你的代码，使用$watch函数来处理这些事情。像这样：

Example

<body ng-app="selectExample">
    <script>
  angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.cars = [
        'Honda','Tesla','BMW','Toyota'
      ];
      $scope.myObj = {
        myColor:'13',
        myCat:'Tesla'
      };

      $scope.$watch('myObj.myCat', function(newVal){
        if(newVal === 'Honda'){
          $scope.colorsByCar= [
            {name:'black', id:11,bt:'Honda'},
            {name:'white', id:12,bt:'Honda'}];
        } else {
          $scope.colorsByCar= [
            {name:'xyz black', id:11,bt:'Tesla'},
            {name:'red', id:201,bt:'Tesla'},
            {name:'blue', id:301,bt:'Tesla'},
            {name:'yellow', id:411,bt:'BMW'}
            ];
        }
      });

    }]);
  </script>
  <div ng-controller="ExampleController">
    <input ng-model="myObj.myCat">
    <input ng-model="myObj.myColor"><br>
    Cars:
    <select ng-model="myObj.myCat">
      <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
    </select><br>
    Colors:
    <select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
    Currently selected: {{myObj.myCat}}
    Currently selected: {{myObj.myColor}}
  </div>
</body>

未在选择中选择ng-model的初始值

2 个答案:

Example