如果字段不是以ng-repeat填充，如何禁用按鈕？

大家好我是我正在面對一些關於我的保存按鈕的問題。我想要禁用我的按鈕，如果沒有數據輸入任何索引。如果所有指數都是空白的，然後我的按鈕應該被禁用如果指數的一個充滿然後使我的按鈕如果字段不是以ng-repeat填充，如何禁用按鈕？

這裏是我的Plunkr鏈接http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview

這裏是我的html文件：

<!DOCTYPE html> 
    <html ng-app="myApp"> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4 
    /angular.min.js"> 
    </script> 
    <script src="script.js"></script> 
    `enter code here`</head> 
<body> 
    <form action="#" ng-controller='detailContrller'> 
    <div class="control-group" ng-repeat="story in stories"> <br> 
     <h4> Enter Data </h4> 
     Name : <input type="text" data-ng-model="selection[story].Name1" 
        placeholder="Enter Name"> <br> 
     Address : <input type="text" data-ng-model="selection[story].Name2" 
        placeholder="Enter Address"> <br> 
     City : <input type="text" data-ng-model="selection[story].Name3" 
        placeholder="Enter City"> <br> 
     Phone : <input type="text" data-ng-model="selection[story].Name4" 
        placeholder="Enter Phone "> <br> 
     State : <input type="text" data-ng-model="selection[story].Name5" 
        placeholder="Enter State"> <br> 

    <input type="checkbox" ng-model="selection[story].all" 
     ng-change="updateAll(story)"> 
    <label class="control-label">IncludeAll {{story}}</label> 
     <div class="controls"> 
      <label class="checkbox inline" ng-repeat="browser in browsers"> 
      <input type="checkbox" value="{{browser}}" 
      ng-model="selection[story].browsers[browser]" 
       ng-change="checkChange(browser)" 
      > {{browser}} 
      </label> 
     </div> 
     </div> 
     <button type="button" data-ng-click="save()">Save</button> 
     <pre>{{selection | json}}</pre> 
    </form> 
    </body> 
</html>

控制器

var app = angular.module("myApp",[]); 
app.controller('detailContrller', function($scope){ 

$scope.stories = []; 
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera']; 
$scope.selection = {}; 
$scope.details = {}; 
var checked; 
$scope.updateAll = function (story) { 
    checked = $scope.selection[story].all; 
    $scope.browsers.forEach(function (browser) { 
     $scope.selection[story].browsers[browser] = checked; 
    }); 
}; 

for(var i = 0; i< 3; i++) { 
$scope.stories.push(i+1); 
} 
$scope.checkChange = function (browser) { 
    for(var i =0; i< $scope.stories.length; i++){ 
     if(!$scope.stories[i].selected){ 
     $scope.checked = false 
     return false; 
     } 
    } 
} 
angular.forEach($scope.stories, function(storgy) { 
    $scope.selection[storgy] = { 
     browsers: {} 
    }; 
}); 

$scope.save = function() { 
console.log($scope.selection); 
} 
})

請檢查並給我一個解決方案在此先感謝。

來源

2014-12-03 Abhishek

您可以通過添加name到form和 '強制' attribute投入和ng-disabled到按鈕做到這一點：

<form action="#" ng-controller='detailContrller' name="MyForm"> 
    <div class="control-group" ng-repeat="story in stories"> <br> 
     <h4> Enter Data </h4> 
       Name : <input type="text" data-ng-model="selection[story].Name1" 
          placeholder="Enter Name" required> <br> 
       Address : <input type="text" data-ng-model="selection[story].Name2" 
          placeholder="Enter Address" required> <br> 
       City : <input type="text" data-ng-model="selection[story].Name3" 
          placeholder="Enter City" required> <br> 
       Phone : <input type="text" data-ng-model="selection[story].Name4" 
          placeholder="Enter Phone " required> <br> 
       State : <input type="text" data-ng-model="selection[story].Name5" 
          placeholder="Enter State" required> <br> 

    <input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)"> 
    <label class="control-label">IncludeAll {{story}}</label> 
      <div class="controls"> 
       <label class="checkbox inline" ng-repeat="browser in browsers"> 
        <input type="checkbox" value="{{browser}}" ng-model="selection[story].browsers[browser]" ng-change="checkChange(browser)" 
        required > {{browser}} 
        </label> 
       </div> 
     </div> 
    <button type="button" data-ng-click="save()" ng-disabled="MyForm.$invalid">Save</button> 
    <pre>{{selection | json}}</pre> 
</form>

http://plnkr.co/edit/qJjt5bLHbCVnHW5k2XEZ?p=preview

在這裏看到的驗證部分：

https://docs.angularjs.org/guide/forms

來源

2014-12-03 13:47:54 Rasalom

你好#Rasalom你說得對g是必需的，但是如果其中一個索引被填充，我希望啓用我的按鈕。在你的情況下需要啓用一個按鈕來填充所有的索引。所以請給我一個解決方案。 – Abhishek 2014-12-03 13:54:22

好的，我得到了你想要做的，我不認爲有內置的解決方案，嘗試創建指令，如下所述：http://stackoverflow.com/questions/25180698/angularjs-multiple-forms- with-ng-repeat-validation和模擬內部指令所需的行爲，所以它將表現得像單個元素。 – Rasalom 2014-12-03 14:00:26

好吧，我會嘗試這個希望它的幫助。如果您有任何其他解決方案，請告訴我。 – Abhishek 2014-12-03 14:04:47

如果字段不是以ng-repeat填充，如何禁用按鈕？

回答

相關問題