禁用基于json值的按钮

时间:2015-07-20 05:52:14

标签: json angularjs

所以我有一个json对象和一个编辑按钮。我想知道如果该值不等于Peter,如何禁用该编辑按钮,以便用户无法编辑它。

angular.module('app')

.factory('WebApi', function () {

//Dummy Data
var name = [{
        value: "Peter",
        text: "Peter"
    }, {
        value: "John",
        text: "John"
    }, {
        value: "Lucy",
        text: "Lucy",
    }, {
        value: "Hawk",
        text: "Hawk"
    }];

var tempData = [];

//Display 100 item 
for (var i = 0; i < 100; i++) {

    var selectedName = name[Math.floor((Math.random() * name.length))];

   tempData.push({
     name: selectedName.text


    })
};

constants.js

angular.module('app')

.factory('Constants', function () {

    return {
        status: {
            Peter: 'Peter'
        }
    };

});

按钮

 <ion-list can-swipe="listCanSwipe">
                            <ion-item ng-repeat="data in tempData"
                                      item="data">
                              Name: {{data.name}}

                                <ion-option-button class="button-calm"
                                                   ng-click="edit(data)">
                                    Edit
                                </ion-option-button>

                            </ion-item>

                        </ion-list>

3 个答案:

答案 0 :(得分:1)

使用ng-disabled: Examlpe: -

<?php function tms_footerWidget(){
    global $wpdb;
    $results = $wpdb->get_results( "SELECT `tms_footerColumns` FROM `wp_tms`");
        foreach ($results as $row) {
           $tms_footerWidget = $row->tms_footerColumns;
            }
      $colsOne="<div class=\"col-xs-12 col-md-12 col-sm-12\"><div class=\"thumbnail\"><?php dynamic_sidebar('tms_footer2'); ?></div>";
    return $colsOne;
  }
?>

答案 1 :(得分:1)

使用ng-disabled,如下所示

<ion-option-button ng-disabled="data.name!='peter'" class="button-calm"ng-click="edit(data)">
      Edit
  </ion-option-button>

供参考 - https://docs.angularjs.org/api/ng/directive/ngDisabled

答案 2 :(得分:0)

在Html中

 ng-disabled="someFunction()"

在你的JS中

$scope.someFunction = function() {

 // return true or false.

};