CODEWITHSUNDEEP
javascripthtmlangularjs
Maxwell
Maxwell

Reputation: 13

AngularJS How to remove empty option - Blank from Select

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.

Upvotes: 1

Views: 3594

Answers (3)

bengro
bengro

Reputation: 1014

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

Upvotes: 2

manuBriot
manuBriot

Reputation: 2715

You should likely use:

$scope.angle3 = "0, 0";

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

Upvotes: 0

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

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>

Upvotes: 0

Related Questions