角JS卸下选择选项空白选项 [英] Angular JS Remove Blank option from Select Option

问题描述

我是新来的角JS。我搜索了很多，但它并没有解决我的问题。

我正在为选择框第一次空白选项。

下面是我的HTML code

 ＆LT; D​​IV NG-应用=MyApp1＆GT;
    ＆LT; D​​IV NG控制器=myController的＆GT;
        ＆LT;输入类型=文本NG模型=feed.name占位符=名称/＆GT;
        ＆LT;选择NG模型=feed.config＆GT;
            ＆LT;选项NG重复=模板CONFIGS＆GT; {{template.name}}＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JS

  VAR的MyApp = angular.module（'MyApp1'，[]）
MyApp.controller（'myController的'，函数（$范围）{
    $ scope.feed = {};      //组态
      $ scope.configs = [
                                 {'名'：'配置1'，
                                  '值'：'CONFIG1}，
                                 {'名'：'配置2'，
                                  '值'：'CONFIG2}，
                                 {'名'：'配置3'
                                  '值'：'CONFIG3'}
                               ];
      //设置第一个选项中选择配置选择
      $ scope.feed.config = $ scope.configs [0] .value的;
}）;
 

但它似乎并没有工作。
我怎样才能解决这个？这里是的jsfiddle演示

解决方案

更改code这样的

\r

\r

VAR的MyApp = angular.module（'MyApp1'，[]）\r
MyApp.controller（'myController的'，函数（$范围）{\r
  $ scope.feed = {};\r
\r
  //组态\r
  $ scope.feed.configs = [\r
    {'名'：'配置1'，\r
     '值'：'CONFIG1}，\r
    {'名'：'配置2'，\r
     '值'：'CONFIG2}，\r
    {'名'：'配置3'\r
     '值'：'CONFIG3'}\r
  ];\r
  //设置第一个选项中选择配置选择\r
  $ scope.feed.config = $ scope.feed.configs [0] .value的;\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; D​​IV NG-应用=MyApp1＆GT;\r
  ＆LT; D​​IV NG控制器=myController的＆GT;\r
    ＆LT;输入类型=文本NG模型=feed.name占位符=名称/＆GT;\r
    ＆LT;！ - ＆LT;选择NG模型=feed.config＆GT;\r
＆LT;选项NG重复=模板CONFIGS＆GT; {{template.name}}＆LT; /选项＆GT;\r
＆LT; /选择＆GT; - ＆GT;\r
    ＆LT;选择NG模型=feed.configNG选项=template.value作为template.name在feed.configs模板＆GT;\r
    ＆LT; /选择＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

工作的jsfiddle演示

更新（2015年12月31日）

如果您不想设置默认值，并希望删除空白选项，

 ＆LT;选择NG模型=feed.configNG选项=template.value作为template.name在feed.configs模板＆GT;
      ＆LT;期权价值=选择=选择＆GT;选择与LT; /选项＆GT;
＆LT; /选择＆GT;
 

和在JS无需初始化值。

$ scope.feed.config = $ scope.feed.configs [0] .value的;

I am new to Angular JS. I searched a lot, but it does not solve my problem.

I am getting a blank option for the first time in select box.

Here is my HTML code

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

But it doesn't seem to work. How can I get this solved? Here is JSFiddle Demo

解决方案

Change your code like this

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Working JSFiddle Demo

UPDATE (Dec 31, 2015)

If You don't want to set a default value and want to remove blank option,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

And in JS no need to initialize value.

$scope.feed.config = $scope.feed.configs[0].value;

这篇关于角JS卸下选择选项空白选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！