1 

<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

4

1 回答 1

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>

于 2018-01-14T17:31:09.417 回答