Javascript Html&；角度：为什么'；我的变量更新失败了吗？
我的html代码中有一些全局变量，负责显示和/或隐藏新的表条目字段和编辑表条目字段。由于某些原因，每次我尝试使用表中的按钮显示或隐藏其中一个字段时，都无法正常工作 这是我的密码：Javascript Html&；角度：为什么'；我的变量更新失败了吗？,javascript,html,angularjs,Javascript,Html,Angularjs,我的html代码中有一些全局变量，负责显示和/或隐藏新的表条目字段和编辑表条目字段。由于某些原因，每次我尝试使用表中的按钮显示或隐藏其中一个字段时，都无法正常工作 这是我的密码： <!--Page HTML du module News du dashboard.--> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootst
<!--Page HTML du module News du dashboard.-->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
<meta charset="UTF-8">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<button type="button" class="btn btn-default pull-right" ng-click="add = !add; updt = false"/>
Ajouter une annonce
<span class="glyphicon glyphicon-new-window"></span>
</button>
<br>
<br>
<table class="table table-striped table-responsive table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="col-md-1 text-center">
<span class="glyphicon glyphicon-pushpin"></span>
</th>
<th class="col-md-7">News</th>
<th class="col-md-1">Auteur</th>
<th class="col-md-1">Date</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td class="text-center">
<b> {{x.pinned}} </b>
</td>
<td>
<b>{{x.title}}</b>
<button type="button" class="btn btn-default pull-right" ng-click="body = !body">
<span class="fa fa-chevron-up" ng-show="body"></span>
<span class="fa fa-chevron-down" ng-hide="body"></span>
</button>
<div class="check-element animate-hide" ng-show="body">
<p>{{x.body}}</p>
</div>
</td>
<td>
{{x.author}}
</td>
<td>
{{x.date}}
</td>
<td>
<div class="text-center">
<button type="button" class="btn btn-default" ng-click="pinUnpin(x.id,x.pinned)">
<span class="glyphicon glyphicon-pushpin"></span>
</button>
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-default" ng-click="delEntry(x.id, x.title)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<div class="page-header">
<h3>Nouvelle news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="checkbox">
<label><input type="checkbox" value="" ng-model="newPinned"/>Epingler la news?</label>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="add = !add">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="newEntry()">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
<div ng-show="updt">
<div class="page-header">
<h3>Editer une news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="updt = !updt">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="updtEntry(); updt = !updt">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./controller.js"></script>
</body>
</html>
一次
新闻
导演
日期
行动
{{x.pinted}}
{{x.title}}
{{x.body}}
{{x.author}}
{{x.date}
新新闻
埃平格勒新闻？
环空器
特使
新闻编辑
环空器
特使
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
问题出在哪里？你不应该把这种逻辑放在你的视野中。您应该在控制器中声明变量，并在函数prepareUpdt（）内的控制器中更改它们。这样，angular将双重绑定这些变量，并在发生更改时更新视图
vm.updt = true;
vm.add = true;
function prepareUpdt() {
// your other code
vm.updt = !vm.updt;
vm.add = false;
}
<div ng-show="vm.add">
...
<div ng-show="vm.updt">
...
<div ng-show="updt">
<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">
<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">
您还可以在~36 ng周围单击一行=“body=！body”。既然您在ng repeat范围内使用它，您应该会很好，但是请记住，在ng repeat之外，它是不可用的。为什么我不能？这是一个代码约定，是否存在优化问题，或者我想做的是不可能的？最好将视图逻辑放在控制器中。这是MVC软件模式的惯例。我并不是说在html中不可能做到这一点，但是如果你不使用它提供的很棒的双向绑定，为什么要使用angular呢？我确实在其他地方使用过它，但我对这一点非常陌生，所以我想如果我不使用控制器中的变量，我就不需要使用数据绑定。顺便说一下，我必须照你说的做，在我的控制器中创建一个updt变量，否则id将无法工作。但是我使用了$scope.updt，而不是vm.updt。是的，使用$scope会起作用，这是一样的：）很高兴我能帮上忙
<div ng-show="viewObj.add">
<div ng-show="updt">
<div ng-show="viewObj.updt">
<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">
<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">