隐藏和显示在angularjs

这是我的位级视图

<input type="text" ng-model="todoName" size="30" 
      placeholder="Add Your Name"> 
     <input type="text" ng-model="todoAge" size="30" 
      placeholder="Add Your Age"> 
     <input type="hidden" ng-model="todoId" /> 
     <form style="display:'?????????'" ng-submit="addTodo()"> 
      <input class="btn-primary" type="submit" value="add"> 
     </form> 
     <form style="display:'?????????'" ng-submit="addTodo()"> 
      <input class="btn-primary" type="submit" value="update"> 
     </form>

，这是我angularjs位级编码

$scope.DisplayUpdate = "none";

我有一个screan用于管理学生的详细信息，我想显示添加按钮时，第一次此时隐藏更新按钮，当更新时间显示更新按钮时，此时添加按钮需要隐藏。

看到这行设置为隐藏，并采用了棱角分明的js脚本的一面展现细节：$scope.DisplayUpdate = "none";

如何我设置我的按钮样式这个价值？

<form style="display:'?????????'" ng-submit="addTodo()"> 
       <input class="btn-primary" style="display:'?????????'" type="submit" value="add"> 
      </form>

来源

2013-10-04 Ramesh Rajendran

http://angulartutorial.blogspot.in/2014/04/show-and-hide-in-angular-js.html – Prashobh

您可以使用ng-show来隐藏它

<form ng-show="DisplayUpdate === 'none'" ng-submit="addTodo()"> 
    <input class="btn-primary" type="submit" value="add"> 
</form>

如果你想从DOM树，采用NG-如果

<form ng-if="DisplayUpdate === 'none'" ng-submit="addTodo()"> 
    <input class="btn-primary" type="submit" value="add"> 
</form>

来源

2013-10-04 07:44:26 dohaivu

其实这个ng-show是布尔值吗？ –

+1您的代码正在工作！ –

@RameshRajendran yes，'ng-show'' ng-if'接受一个返回布尔值的表达式。你可以传递一个复杂的表达式或函数。 – dohaivu

不要直接设置样式，请使用ng-show指令并让Angular为您处理它。

API Docs

来源

2013-10-04 07:27:14 ivarni

+1对你的链接非常有帮助！ –

没问题:)通常，当您尝试以一种必要的方式做某件事时，您可以使用一种声明式的角度解决方案。 – ivarni

最后我得到它删除。

下面是我的代码：

JS文件：

function TodoCtrl($scope) { 

    var value = BindStudentList(); 
    function BindStudentList() { 
     $.ajax({ 
      url: '/Home/Contact1', 
      type: 'GET', 
      async: false, 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (data) { 
       value = data.data; 
      } 
     }); 
     $scope.DisplaySave = true; 
     $scope.DisplayUpdate = false; 
     return value; 
    } 

    $scope.addTodo = function() {  
     $.ajax({ 
      url: '/Home/Index1', 
      type: 'GET', 
      data: { todoName: $scope.todoName, todoAge: $scope.todoAge }, 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (data) { 
       value = data.data; 
      } 
     }); 
    }; 

    $scope.Sample = value; 
    $scope.remaining = function() { 
     var count = 0; 
     angular.forEach($scope.Sample, function (todo) { 
      count += todo.done ? 0 : 1; 
     }); 
     return count; 
    }; 

    $scope.editTodo = function (Student) { 
     $.ajax({ 
      url: '/Home/Edit1', 
      type: 'GET', 
      data: { Id: Student.todo.StudentId }, 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (data) { 
       $scope.todoName = data.data.StudentName; 
       $scope.todoAge = data.data.StudentAge; 
       $scope.todoId = data.data.StudentId; 
       $scope.DisplayUpdate = true; 
       $scope.DisplaySave = false; 
      } 
     }); 
    }; 
}

，这是我的看法代码

<!doctype html> 
<html ng-app> 

<body> 
    <script src="~/Scripts/angular.js"></script> 

    <h2>Student Details</h2> 
    <div ng-controller="TodoCtrl"> 
     <span>{{remaining()}} of {{Sample.length}} remaining</span> 
     [ <a href="" ng-click="archive()">archive</a> ] 
     <input type="text" ng-model="todoName" size="30" 
      placeholder="Add Your Name"> 
     <input type="text" ng-model="todoAge" size="30" 
      placeholder="Add Your Age"> 
     <input type="hidden" ng-model="todoId" /> 
     <form ng-show="DisplaySave" ng-submit="addTodo()"> 
      <input class="btn-primary" type="submit" value="Save"> 
     </form> 
     <form ng-show="DisplayUpdate" ng-submit="addTodo()"> 
      <input class="btn-primary" type="submit" value="Update"> 
     </form> 
     <br /> 
     <br /> 
     <table> 
      <tr> 
       <td><b>Student Name</b></td> 
       <td><b>Student Age</b></td> 
      </tr> 
      <tr ng-repeat="todo in Sample"> 
       <td><span>{{todo.StudentName}}</span></td> 
       <td><span>{{todo.StudentAge}}</span></td> 
       <td> 
        <button value="{{todo.StudentId}}" ng-click="editTodo(this)">Edit</button> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <script src="~/Scripts/Todo.js"></script> 
</body> 
</html>

我说在我的按钮ng-show="DisplaySave"和ng-show="DisplayUpdate"，我会通过类似于true或false的值在javascript使用angularjs当编辑和加载时间。

现在工作。我知道我的代码会帮助其他人。欢呼声

来源

2013-10-04 08:41:18

隐藏和显示在angularjs

回答

相关问题