隱藏和顯示在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

回答

相關問題