什么是角下拉菜单和放大器的最佳做法; NG选项 [英] what is best practice for Angular drop down menu & ng-option

问题描述

美好的一天，我创建了一个AngularJS道琼斯指数下跌菜单。但回到我的对象不是一个项{DEPTNAME：IT，ID：1}。我需要的ID只返还给我的表。
在那里我需要改变NG-选项的任何东西=item.deptName在department.departments项
查看示例：

good day, i created a drop dow menu on AngularJS. but it return to me an object not an item {"deptName":"IT","id":"1"}. i need to return the id only to my table. is there any thing i need to change on ng-options="item.deptName for item in department.departments" see the sample:

JS

angular.module('firstApp', [])

.controller('EmpController', function() {
    var vm = this;
    // define a list of items
    vm.employees = [{
        name: 'Alex',
        id: '2233',
        dept: 'IT'
    }, {
        name: 'Scott',
        id: '2244',
        dept: 'IT'
    }, {
        name: 'Joe',
        id: '2255',
        dept: 'IT'
    }];
})

.controller('DeptController', function() {
    var vm = this;
    vm.departments = [{
        deptName: 'IT',
        id: '1'
    }, {
        deptName: 'Finance',
        id: '2'
    }, {
        deptName: 'Marketing',
        id: '3'
    }];
});

HTML

    
    
    

<div class="jumbotron">


    <h1>The Selected is </h1>
    <h2>{{main.employeeData.dept}}</h2>

    <!-- form to add computer to the list -->
    <form class="form-inline" ng-controller="DeptController as department">
        <div class="form-group">
            <label class="col-sm-2 control-label">Dept menu</label>
            <div class="col-sm-6">
                <!--<select  required="true" ng-model="main.employeeData.dept" ng-options="item.deptName  for item in department.departments">-->
                <!--<option value="">Select Category</option>-->
                <!--</select>-->

                <select required="true" ng-model="main.employeeData.dept" ng-options="item.id as item.deptName for item in department.departments">
                    <option value="">Select Category</option>
                </select>
            </div>
        </div>

    </form>
</div>

</div>

推荐答案

您需要使用为的 NG-选项如 item.id为item.deptName 。它会显示 item.deptName 在下拉值和放大器; item.id 值分配给相应的选择 NG-模型

You need to use as of ng-options like item.id as item.deptName .It will show item.deptName on drop-down value & assign item.id value to the respective select ng-model

标记

 <select required="true" ng-model="main.employeeData.dept" ng-options="item.id as item.deptName for item in department.departments">
      <option value="">Select Category</option>
 </select>

工作Plunkr 这里

这篇关于什么是角下拉菜单和放大器的最佳做法; NG选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！