【发布时间】：2017-02-22 08:26:05
【问题描述】：
## 我在 angularjs 中有一个名为 List 的表。 我的 html 中有一个带有输入的表单。 当我点击编辑按钮时，我想用这个表填充我的输入值。我不知道如何在 angularjs 中选择 input 的值。 以 jquery 为例： $('#name').val(); ##
HTML 代码
<!DOCTYPE html>
<html ng-app = "employe" ng-controller="FormController as FormCtrl">
<head>
<meta charset="utf-8">
<title>List of employe</title>
<meta name="viewport" content="with=device-width , initial-scale=0 ,shrink-to-fit=no">
<link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./files/style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="./files/code.js"></script>
</head>
<body ng-controller = "ListCtrl" >
<main>
<div >
<input type="button" value="Add new employee" ng-click="FormCtrl.setShow(2)">
<form class="form-horizontal" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" ng-hide="FormCtrl.isShow(1)" novalidate >
<!--{{newemployee}}-->
<h2>Add/Edit employee</h2>
<!-- NOM -->
<div class="form-group">
<label for="name" class="col-xs-5 control-label">Name</label>
<div class="col-xs-2">
<input type="texte" ng-model="newemployee.name" class="form-control" ng-required="true" name="name">
</div>
</div>
<!-- AGE -->
<div class="form-group">
<label for="age" class="col-xs-5 control-label">Age</label>
<div class="col-xs-2">
这里是我的 ng-change
<input type="number" ng-change="change()" ng-model="newemployee.age" class="form-control" ng-required="true">
</div>
</div>
<!-- NICKNAME -->
<div class="form-group">
<label for="nickname" class="col-xs-5 control-label">Nickname</label>
<div class="col-xs-2">
<input type="texte" ng-model="newemployee.nickname" class="form-control" ng-required="true">
</div>
</div>
<!-- EMPLOYEE -->
<div class="form-group">
<label for="employee" class="col-xs-5 control-label">Employee</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" ng-model="newemployee.job" name="inlineRadioOptions" id="Yes" value="yes">Yes
</label>
<label class="radio-inline">
<input type="radio" ng-model="newemployee.job" name="inlineRadioOptions" id="No" value="no" >No
</label>
</div>
</div>
<!-- JOB -->
<div class="form-group">
<label for="job" class="col-xs-5 control-label">Job</label>
<div class="col-xs-2">
<select ng-model="newemployee.job" class="form-control">
<option>Founder</option>
<option>Market chef</option>
<option>Stage</option>
</select>
</div>
</div>
<!-- ANNEE -->
<div class="form-group">
<label for="years" class="col-xs-5 control-label">Years</label>
<div class="col-xs-2">
<input type="number" ng-model="newemployee.years" class="form-control" ng-required="true">
</div>
</div>
<!-- BUTTON -->
<div class="center">
<button type="submit" class="btn btn-default btn-success">Validate</button>
<input type="button" value="Close" class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1) && reset()">
</div>
</form>
</div>
<!-- TABLE -->
<table class="table table-bordered">
<thead>
<tr>
<td>Name (Job title)</td>
<td>Age</td>
<td>Nickname</td>
<td>Years</td>
<td>Employee</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="employeeList in list">
<td>{{employeeList.name}} <span>{{employeeList.job}}</span></td>
<td>{{employeeList.age }}</td>
<td>{{employeeList.nickname }}</td>
<td>{{employeeList.years }}</td>
<td>{{employeeList.salarie }}</td>
<td>
Bouton EDIT + 函数 setEditTrue 倒 ng-change
<input type="button" value="Edit" ng-click="FormCtrl.setShow(2) && ListCtrl.setEdit(true) && ListCtrl.setTable(employeeList)" class="btn btn-default btn-primary">
<input type="button" value="Delete" ng-click="deleteEmployee(employeeList)" class="btn btn-default btn-danger">
</td>
</tr>
</tbody>
</table>
</main>
Angularjs 代码
(function () {
var app = angular.module('employe', []);
app.controller("FormController", function () {
this.Edit = 1;
this.isShow = function(checkEdit){
return this.Edit == checkEdit;
};
this.setShow = function(setShow){
return this.Edit = setShow ;
};
console.log(this.Edit);
});
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = [];
$scope.newemployee = {};
$scope.addEmployee = function(){
$scope.list.push({
name: $scope.newemployee.name,
age : parseInt($scope.newemployee.age),
nickname : $scope.newemployee.nickname,
job : $scope.newemployee.job ,
years : parseInt($scope.newemployee.years),
salarie : $scope.newemployee.job
});
console.log($scope.list);
$scope.newemployee.name = "";
$scope.newemployee.age = "";
$scope.newemployee.nickname = "";
$scope.newemployee.job = "";
$scope.newemployee.years = "";
$scope.newemployee.job = "";
};
console.log($scope.list);
$scope.deleteEmployee = function(employeeList){
var removeEmployee = $scope.list.indexOf(employeeList);
$scope.list.splice(removeEmployee, 1);
}
$scope.reset = function(){
$scope.newemployee.name = "";
$scope.newemployee.age = "";
$scope.newemployee.nickname = "";
$scope.newemployee.job = "";
$scope.newemployee.years = "";
$scope.newemployee.job = "";
};
var edit = false;
$scope.setTrue = function(set){
edit = set;
}
var empList = {};
$scope.setEmplist = function(thisEmp){
return empList = thisEmp;
}
$scope.change = function(empList) {
if(edit == true){
$scope.newemployee.name = empList.name;
}
};
}]);
})();
【问题讨论】：
-
我无法回答你的问题
-
如果您只想在字段中填充值，这些字段可以通过为模型提供值来轻松完成，例如您的模型之一是 ng-model="newemployee.age" 来填充此字段赋予值$scope.newemployee.age =5
标签： javascript html angularjs input