Javascript AngularJS如何从选择中删除空选项-空白

希望得到你的帮助

我第一次在选择框中得到一个空白选项
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>

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

我怎样才能解决这个问题？ 谢谢

编辑： 演示一个问题：
我需要两种价值观的选择

更新：
这是我的密码。我尝试更新所有字段上的选定值，并将图像设置为选定角度，在Danny Fardy Jhonston Bermúdez的帮助下，我已经解决了这个问题，谢谢

当传递给

ng options

的一组选项中不存在

ng model

引用的值时，将生成空选项。这样做是为了防止意外选择模型：可以看到初始模型未定义或不在选项集中，不想自己决定模型值

在研究了这一点之后，据我所知，不支持复杂的值类型。在我看来，最好的解决方案是查找给定id的值。id必须是唯一的才能查找值

看

标记：

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

您可以尝试使用：

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

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

更新：

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

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

通过使用：

$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”，
职能（$范围）{
$scope.data=[{
id:0，
角1:'0'，
第2条：“0”，
名称：'---选择TC---'
}, {
id:1，
角1:'0'，
第2条：“0”，
名称：“ПκП-6（01）”
}, {
id:2，
第1条：“90”，
第二条：‘99’，
名称：“ПκП-6（02）”
}, {
id:3，
角1:'180'，
第二条：“270”，
名称：“ПκП-6（03）”
}];
$scope.angle3=$scope.data[0]；
$scope.change\u val=函数（角度3）{
$scope.angle1=angle3.1；
$scope.angle2=angle3.2；
控制台。圆木（角度3.corner1+“，”+角度3.corner2）；
};
}
]);

&α；={{angle1}}°；



&β；={{angle2}}°；





您可能应该使用：

$scope.angle3 = "0, 0";

因为这是此处比较的值（您的
的值）。
是的，我已经读过了，但是我如何修复？我有复杂的价值，所以空白的外观。如果你想使用，你的解决方案是正确的，但这不是我的变体。若您想使用值数组，只需在答案中使用like，并将函数放入控制器。这是我的代码：jsfiddle.net/MTfRD/2227谢谢你的帮助我更新了我的解决方案。谢谢你的帮助，你的答案帮助我解决了这个问题。这是我使用您答案的代码：