Javascript 如何使用angular ng view将内容保留在输入字段中
我是AngularJS的新手，正在做一个小项目。我想为课程建立一个可编辑的表格，包括课程Id和课程名称。用户可以单击“编辑”按钮，然后编辑内容 然而，我遇到了一个问题，当用户点击编辑按钮时，所有的内容都消失了，比如删除，但我想让内容保持可编辑。我尝试了ng值，但没有成功 这是我的代码和代码笔链接： 非常感谢你Javascript 如何使用angular ng view将内容保留在输入字段中,javascript,angularjs,Javascript,Angularjs,我是AngularJS的新手，正在做一个小项目。我想为课程建立一个可编辑的表格，包括课程Id和课程名称。用户可以单击“编辑”按钮，然后编辑内容 然而，我遇到了一个问题，当用户点击编辑按钮时，所有的内容都消失了，比如删除，但我想让内容保持可编辑。我尝试了ng值，但没有成功 这是我的代码和代码笔链接： 非常感谢你 <html> <head> <title>Online Learning</title> <m
<html>
<head>
<title>Online Learning</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script>
var app = angular.module('app', []);
app.controller('courseController', function ($scope) {
$scope.courses = [
{
courseID: "CS602",
courseName: "Web Development",
isEditing:false
},
{
courseID: "CS502",
courseName: "Foundation of Java",
isEditing:false
}
];
$scope.addCourse = ()=>{
$scope.courses.push({
courseID: $scope.createIdInput,
courseName: $scope.createCourseInput
});
$scope.createIdInput = '';
$scope.createCourseInput = '';
console.log(1);
}
$scope.onEditClick = (course)=>{
course.isEditing = true;
}
});
</script>
</head>
<body ng-app="app">
<<h1>Course Manager</h1>
<div ng-controller = "courseController">
<form name="courseForm">
<input id="c_id_input" placeholder="Add course ID" ng-model="createIdInput" />
<input id= "c_name_input" placeholder="Add course name" ng-model="createCourseInput" />
<button class="btn btn-success pull-right" ng-click="addCourse()">Add Course</button>
</form>
<table class="table table-striped table-bordered table-condensed table-hover">
<tr>
<th>Course ID</th>
<th>Course Name</th>
<th>Actions</th>
</tr>
<tr ng-repeat = "course in courses">
<td>
<span ng-if="!course.isEditing" >{{course.courseID}}</span>
<form ng-submit="updateTask(course)">
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
</form>
</td>
<td>
<span ng-if="!course.isEditing">{{course.courseName}}</span>
<form >
<input ng-if="course.isEditing" class="form-control"
ng-value="course.courseName" ng-model="updatedCourseName" />
</form>
</td>
<td>
<button class="btn btn-info" ng-click="onEditClick(course)" >Edit</button>
<button class="btn btn-danger">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
在线学习
var-app=angular.module（'app'，[]）；
应用控制器（'courseController'，函数（$scope）{
$scope.courses=[
{
课程ID:“CS602”，
课程名称：“网络开发”，
i编辑：错误
},
{
课程ID:“CS502”，
课程名称：“Java的基础”，
i编辑：错误
}
];
$scope.addCourse=（）=>{
$scope.courses.push({
courseID:$scope.createdInput，
courseName:$scope.createCourseInput
});
$scope.createIdInput=''；
$scope.createCourseInput=''；
控制台日志（1）；
}
$scope.onEditClick=（课程）=>{
course.isEditing=true；
}
});
我认为您误解了ng模型的工作原理ng model
表示保存数据的变量，它是一个双向绑定。您不需要单独的变量来存储“更新的”值
而不是：
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
你应使用：
<input type="text" ng-if="course.isEditing" class="form-control"
ng-model="course.courseID" />
更改将自动实时反映回阵列。我认为您误解了ng model
的工作原理ng model
表示保存数据的变量，它是一个双向绑定。您不需要单独的变量来存储“更新的”值
而不是：
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
你应使用：
<input type="text" ng-if="course.isEditing" class="form-control"
ng-model="course.courseID" />
更改将自动实时反映回阵列。这是由于编辑字段中的ng模型造成的。如果仔细观察，您会发现updatedCourseId中ID字段的ng模型，名称为updatedCourseName。但是，实际值存储在course.courseID和course.courseName中。更改ng模型并指向正确的变量
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
<input ng-if="course.isEditing" class="form-control"
ng-value="course.courseName" ng-model="updatedCourseName" />
HTML
发生这种情况是因为编辑字段中的ng模型。如果仔细观察，您会发现updatedCourseId中ID字段的ng模型，名称为updatedCourseName。但是，实际值存储在course.courseID和course.courseName中。更改ng模型并指向正确的变量
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
<input ng-if="course.isEditing" class="form-control"
ng-value="course.courseName" ng-model="updatedCourseName" />
HTML
@partik非常感谢您@非常感谢你！