javascript - AngularJS 如何删除空选项 - 选择中的空白

Question

希望得到您的帮助。

我第一次在选择框中看到一个空白选项。
HTML:

<div ng-app="DispAngleApp" ng-controller="AppCtrl as app">
  <p><select size="1" ng-change="change_val(angle3)" ng-model="angle3" ng-init="angle3='0'">
                <option ng-repeat ="option in data" value="{{option.corner1}}, {{option.corner2}}">{{option.name}}</option>
            </select></p>
</div>

AngularJS:

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

function AppCtrl($scope) {
  $scope.data = [{
      id: 0,
      corner1: '0',
      corner2: '0',
      name: '---Выберите ТК---'
    },
    {
      id: 1,
      corner1: '0',
      corner2: '0',
      name: 'ТКР-6(01)'
    },
    {
      id: 2,
      corner1: '90',
      corner2: '99',
      name: 'ТКР-6(02)'
    },
    {
      id: 3,
      corner1: '180',
      corner2: '270',
      name: 'ТКР-6(03)'
    }
  ];
}

我该如何解决这个问题？谢谢。

已编辑:问题演示: http://jsfiddle.net/MTfRD/2203/
我需要 value 选项的两个值。

更新: http://jsfiddle.net/MTfRD/2227/
这是我的代码。我尝试更新所有字段的选定值并以选定的 Angular 转动图像，在 Danny Fardy Jhonston Bermúdez 的帮助下，我解决了这个问题，谢谢。

Answer 1

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: angularjscan see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.

Why does AngularJS include an empty option in select?

在调查之后，据我所知，不支持复杂的值类型。在我看来，解决此问题的最佳解决方案是查找给定 id 的值。 id 必须是唯一的才能查找值。

参见 http://jsfiddle.net/61xtxy6a/

标记:

<div ng-app="DispAngleApp" ng-controller="AppCtrl as app">
  <select size="1" ng-change="change_val(angle3)" ng-model="angle3">
    <option ng-repeat ="option in data" value="{{option.id}}">{{option.name}}</option>
  </select>
  <button ng-click="getValue()">Get value.</button>
</div>

Controller :

$scope.data = [{
    id: 0,
    corner1: '0',
    corner2: '0',
    name: '---Выберите ТК---'
  },
  {
    id: 1,
    corner1: '0',
    corner2: '0',
    name: 'ТКР-6(01)'
  },
  {
    id: 2,
    corner1: '90',
    corner2: '99',
    name: 'ТКР-6(02)'
  },
  {
    id: 3,
    corner1: '180',
    corner2: '270',
    name: 'ТКР-6(03)'
  }
];
$scope.angle3 = '0';

$scope.getValue = function() {
  var value = $scope.data[$scope.angle3].corner1 + ',' + $scope.data[$scope.angle3].corner2;
  console.log(value);
}