Html＆Angular：为什么我的变量没有更新？

我在我的HTML代码中有一些全局变量负责显示和/或隐藏新的表格输入字段和编辑表格输入字段。出于某些原因，每次我尝试使用表格中的按钮显示或隐藏这些字段中的一个时，它都不起作用。Html＆Angular：为什么我的变量没有更新？

这里是我的代码：

<!--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>

举例来说，当我点击第一个按钮（Ajouter UNE annonce），我的“添加”和“UPDT”分区的区域将显示相应的或隐藏。当我在这些div中使用取消按钮时也是如此。但按钮每个表格行：

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

似乎并没有更新我的“添加”和“updt”变量。我知道我的函数prepareUpdt被调用，所以我知道已经达到ng-click。

问题在哪里？

来源

2016-06-07 Martin Locqueville

你不应该把这个逻辑放在你的视图中。您应该在控制器中声明变量，并在函数prepareUpdt（）内的控制器中更改它们。通过这种方式，角将双重绑定这些变量并在更改时更新您的视图。

vm.updt = true; 
vm.add = true; 

function prepareUpdt() { 
    // your other code 
    vm.updt = !vm.updt; 
    vm.add = false; 
}

，并在你的HTML：

<div ng-show="vm.add"> 
... 
<div ng-show="vm.updt">

来源

2016-06-07 09:23:43

为什么我不应该？这是一个代码约定，是否存在优化问题，或者我想做的事情是不可能的？ –

将视图逻辑放在控制器中会更好。这是MVC软件模式的惯例。我不是说它不可能在html中完成，但为什么使用角度如果你不使用它提供的真棒2way绑定？ –

我在其他地方使用它，但我对此很新，所以我想如果我没有任何用于控制器中的变量的数据绑定，我不需要使用数据绑定。 –

这是由于与NG-重复范围界定问题。更多信息是here。

基本上，add和updt不存在于外部作用域（在ng-repeat作用域之外），因此当你单击表中的按钮时，它们的值永远不会改变。

要解决，我建议你改变每个定义的

ng-click="add = !add; updt = false"

（行〜11，55），以

ng-click="viewObj.add = !viewObj.add; viewObj.updt = false"

而且

<div ng-show="add">

到

<div ng-show="viewObj.add">

..和..

<div ng-show="updt">

到

<div ng-show="viewObj.updt">

此外，

〜77：

<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">

和

〜95：

<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">

您还可以围绕线〜36 NG点击= “体=！身体”。既然你在ng-repeat范围内使用了它，你应该没问题，但是请记住，在ng-repeat之外是不可用的。

来源

2016-06-07 09:25:06 Brian

一切正常，谢谢！ –

Html＆Angular：为什么我的变量没有更新？

回答

相关问题