用一个angularjs对象填充一个现有的表单

Fill an existing form with an object of angularjs

本文关键字：一个 表单 angularjs 对象 填充      更新时间：2023-09-26

##我在angularjs中有一个名为List的表。我有一个表单输入在我的html。当我点击编辑按钮时，我想用这个表填充我输入的值。我不知道如何在angularjs中选择input的值。jquery的示例:$('#name').val();# #

<

HTML代码/h2>
<!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">

Here my 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>

button EDIT + function setEditTrue pour -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;
      }
   };
  }]);

})();

期望不正确。如果您希望拥有一个可编辑的表，则必须在表的每个<td>中都有一些输入控件。每个td内的内容应该是一个文本块&输入控件。单击edit将切换输入控件和文本块的可见性。这与angular无关。

相关文章：