AngularJS How to remove empty option - Blank from Select

Question

Hoping for your help.

I am getting a blank option for the first time in select box.
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)'
    }
  ];
}

How can I fix that problem? Thanks.

EDITED: Demo of a problem: http://jsfiddle.net/MTfRD/2203/
I need both values of value option.

UPDATE:http://jsfiddle.net/MTfRD/2227/
Here it is my code. I tried to update chosen value on all fields and turn the image on selected angle and with help of Danny Fardy Jhonston Bermúdez I've fixed the problem, thanks.

I've updated my solution. – Danny Fardy Jhonston Bermúdez Sep 26 '15 at 16:43 — Danny Fardy Jhonston Bermúdez, Sep 26 '15 at 16:43

score 2 · Answer 1 · edited Nov 18 '17 at 05:40

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?

After looking into this, as far as I understand, there is no support for complex value types. The best solution around this in my opinion is to look up the value given the id. The id must be unique in order to look up the values.

See http://jsfiddle.net/61xtxy6a/

Markup:

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

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

Yes, I've read about that, but how can I fix? I have complex value, so the Blank appears. — Maxwell, Sep 26 '15 at 15:55

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-09-26T16:59:53.653

You might try using:

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

Where «option» contains the object that you selected.

Updated:

By using:

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

You'll have access to the properties of the selected object, so easily can show in your text box fields correctly.

Then:

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>

thak you for help, your answer helped me to solve the problem. here it is my code where i used your answer: http://jsfiddle.net/MTfRD/2227/ — Maxwell, Sep 26 '15 at 21:22

score 0 · Answer 3 · edited Nov 18 '17 at 05:40

0

You should likely use:

$scope.angle3 = "0, 0";

Since that is the value compared by angularjshere (the value of your <option>).

edited Nov 18 '17 at 05:40

Danny Fardy Jhonston Bermúdez

5,500
5
25
37

answered Sep 26 '15 at 16:01

manuBriot

2,755
13
21

AngularJS How to remove empty option - Blank from Select

3 Answers3