如何根据下拉列表和用户输入

时间:2017-02-03 22:00:50

标签: javascript jquery html angularjs

我有一份有薪资信息的员工名单。 在我的html页面上,我有一个带有ID#的下拉列表和一个输入新工资的字段......当用户点击提交按钮时,我想从下拉列表中更新具有所选id#的员工的工资..我试图这样做是学习角度js的一部分。

到目前为止,这是我的script.js:

var myApp = angular.module("myModule",[])
.controller("myController", function($scope){
    $scope.message = "Learning Angular JS!";
    var employees = [
        {eid:"1", firstName:"Jack", lastName:"Joba", gender:"Male", salary:"50000"},
        {eid:"2", firstName:"Jim", lastName:"Henry", gender:"Female", salary:"40000"},
        {eid:"3", firstName:"Jacky", lastName:"Mash", gender:"Female", salary:"60000"},
        {eid:"4", firstName:"Rahul", lastName:"Pat", gender:"Female", salary:"70000"}
    ];
    $scope.employees = employees;
    $scope.image = "snoopy1.jpg";

    $scope.y="";
    $scope.x ="";

    $scope.updateLastName = function()    
    {
        y.lastName=x;
    }


}); 

html页面:

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="script.js"></script>



<title>Hello</title>

</head>


<body ng-app="myModule" ng-controller="myController">


<div>{{message}}</div>
<br><br>
<select>
  <option ng-repeat="employee in employees">{{employee.eid}}</option>
</select>
<input id="inp1" placeholder="enter new salary"></input><button ng-click="updateLastName()">Submit</button>
<br><br>
<table border="2px">
<thead>

    <tr><th>First Name</th><th>Last Name</th><th>Gender</th><th>Salary</th></tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>

</tr>

</tbody>
</table>


<br>

<br>

<img ng-src="{{image}}" style="height: 100px;width: 100px;">


<script>

</script>


</body>
</html>

我怎样才能实现这一目标?..我不知道如何传递所选的选项ID以及输入更新功能的新工资......

1 个答案:

答案 0 :(得分:2)

将模型放到column1 10 12 145 0 13 0 0 0 15 16

保存您选择的员工<input ng-model="newSalary" id="inp1" placeholder="enter new salary"></input>

您可以将员工传递给更新功能和新工资<select ng-model="selectedEmployee"> <option ng-repeat="employee in employees">{{employee.eid}}</option> </select>

在您的控制器中更新员工,如:

<button ng-click="updateLastName(selectedEmployee, newSalary)">Submit</button>

编辑:我错过了遗憾的问题。更新了答案