Question

<h2>Your TO DOs</h2>
<div class="list-group" ng-repeat="i in tasks track by $index">
  <div href="#" class="list-group-item" style="overflow:auto;">
    <span id={{$index}} style="background:{{i.priority}};padding:1%; border:#bfb9b9; border-style:dotted;">{{i.note}} </span>
    <h5 style="float:right;">
      <span>
          <button  class="btn-xs" style="border:none;background: cornflowerblue;" ng-disabled = '{{i.priority==="red"}}' ng-click = 'impTask(i)' >Imp</button>

ng-disabled = '{{i.priority==="red"}}'代码中的这一行在通过 DOM 进行检查时无效，其值显示为“true”。

这是完整的代码

https://gist.github.com/7a3c7fd977c115638d386097f7c48b72.git

Answer 1

您不应该使用ng-disabled

的注释

更改

发件人

ng-disabled = '{{i.priority==="red"}}'

以

ng-disabled = 'i.priority==="red"

<强>样本

var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.tasks = [{note:"Do the laundry", priority:'yellow'},{note:"Meeting at 10.00", priority:'yellow'}]; $scope.removeTask = function(task) { var removedTask = $scope.tasks.indexOf(task); $scope.tasks.splice(removedTask, 1); }; $scope.addTask = function(){ if($scope.newTask!= null && $scope.newTask!= "" ) $scope.tasks.push({note:$scope.newTask,priority:'yellow'}); $scope.newTask= ""; }; $scope.impTask = function(task) { var editedTask = $scope.tasks.indexOf(task); $scope.tasks.splice(editedTask, 1); task.priority= "red"; $scope.tasks.unshift(task); }; });

<!DOCTYPE html> <html> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body ng-app="myApp"> <div class="container" ng-controller="personCtrl" style="margin:5%;"> <div> <form ng-submit="addTask()"> <input type="text" onClick="this.select()" placeholder="enter the task" ng-model="newTask"/> <input type="submit" value="Add a new task" /> </form> </div> <h2>Your TO DOs</h2> <div class="list-group" ng-repeat="i in tasks track by $index"> <div href="#" class="list-group-item" style="overflow:auto;"> <span id={{$index}} style="background:{{i.priority}};padding:1%; border:#bfb9b9; border-style:dotted;">{{i.note}} </span> <h5 style="float:right;" > <span> <button class="btn-xs" style="border:none;background: cornflowerblue;" ng-disabled = 'i.priority==="red"' ng-click = 'impTask(i)' >Imp</button> </span> <span> <button class="btn-xs" style="border:none;background: cornflowerblue; " ng-click = 'strikeTask(i)'>Done</button> </span> <span> <button class="btn-xs" style="border:none;background: cornflowerblue;" ng-click = 'editTask(i)' >Edit</button> </span> <a ng-click="removeTask(i)" style="padding-left:5px; padding-right:5px; color: red; font-weight: 800; background:#dad4d4";>X</a> </div> </div> </body> </html>

与表达式一起使用时，ng-disabled不起作用

1 个答案: