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 FardyJhonstonBermúdez的帮助下解决了问题，谢谢。

Answer 1

当ng-model引用的值在传递给ng-options的一组选项中不存在时，会生成空选项。这可以防止意外模型选择：angularjs可以看到初始模型在选项集中是undefined或不是{0}}并且不想自己决定模型值。

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>

控制器：

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

其中«option»包含您选择的对象。

<强>更新

使用：

$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>的值）。

AngularJS如何删除空选项 - 选择空白

3 个答案: