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/
我需要两个值选项。

更新： http ： //jsfiddle.net/MTfRD/2227/
这是我的代码。 我尝试在所有字段上更新选定的值，并将图像转换为选定的角度，并在Danny Fardy JhonstonBermúdez的帮助下，修复了问题，谢谢。

Answer 1

当ng-model引用的值在传递给ng-options一组选项中不存在时，将生成empty选项。 这样做是为了防止意外选择模型： angularjs可以看到初始模型是undefined还是未在选项集中，并且不想自己决定模型的值。

为什么AngularJS在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>

控制器 ：

$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);
}

Answer 2

您可以尝试使用：

ng-options="option as option.name for option in data"

其中“选项”包含您选择的对象。

更新：

通过使用：

$scope.change_val = function(angle3) {
      $scope.angle1 = angle3.corner1;
      $scope.angle2 = angle3.corner2;
      console.log(angle3.corner1 + ", " + angle3.corner2);
};

您将有权访问所选对象的属性，因此可以轻松地在文本框中正确显示字段。

然后：

 var myApp = angular.module('DispAngleApp', []); myApp.controller("AppCtrl", ["$scope", function($scope) { $scope.data = [{ id: 0, corner1: '0', corner2: '0', name: '---Choose TC---' }, { 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 = $scope.data[0]; $scope.change_val = function(angle3) { $scope.angle1 = angle3.corner1; $scope.angle2 = angle3.corner2; console.log(angle3.corner1 + ", " + angle3.corner2); }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="DispAngleApp" ng-controller="AppCtrl as app"> <p><span class="alfa">&alpha; = {{angle1}}&deg;</span> </p> <input type="text" id="ang_1" maxlength="3" onfocus="this.value = parseInt(value) || ''" onblur="this.value = parseInt(value) || '0'" ng-change="minmax(angle1, 0, 360) || 0" ng-model="angle1" ng-init="angle1='0'"> <br> <p><span class="beta">&beta; = {{angle2}}&deg;</span> </p> <input type="text" id="ang_2" maxlength="3" onfocus="this.value = parseInt(value) || ''" onblur="this.value = parseInt(value) || '0'" ng-change="minmax2(angle2, 0, 360) || 0" ng-model="angle2" ng-init="angle2='0'"> <br> <p> <select size="1" ng-change="change_val(angle3)" ng-model="angle3" ng-options="option as option.name for option in data"> </select> </p> </div> 

Answer 3

您应该使用：

$scope.angle3 = "0, 0";

因为这是这里的angularjs比较的值（ <option>的值）。