javascript - Json 对象 AngularJS

标签 javascript json angularjs html

<分区>

好吧,我需要以 Json 格式访问另一个数组内的数组内的一些信息。

像这样更具体:

[
  {
    "id": 1,
    "name": "PowerRanger",
    "description": "BLUE",
    "connections": 
    [ {"id": 123,"megazordName": "Fer","isSet": true},
      {"id": 456,"megazordName": "Alg","isSet": false}
    ]
    },{
     "id": 2,
     "name": "PowerRanger",
     "description": "RED",
     "connections": 
    [ {"id": 789,"megazordName": "Tes","isSet": false},
      {"id": 369,"megazordName": "EXp","isSet": true}
    ]
    },{
    "id": 3,
    "name": "PowerRanger",
    "description": "WHITE",
    "connections": 
    [ {"id": 258,"megazordName": "Ref","isSet": false},
      {"id": 147,"megazordName": "Mob","isSet": false}
    ]
    }
]

而且我需要在仅选择一个时禁用所有“megazordName”(更具体地说是使用复选框)。 需要一些帮助:)

这是 plunker 。 我该怎么做?

最佳答案

我有一个解决方案,但它不是您想要的 100%。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <style>
        .check-disabled-true {
            color: gray
        }

        .check-disabled-false {
            color: black
        }
    </style>
    <script>
        angular.module("atpModule", [])
                .controller("atpCtrl", function ($scope) {
                    $scope.selectedPrizemoney = 'Select one';
                    $scope.isdisabled=true;
                    $scope.atp = [
    {
    "id": 1,
    "name": "PowerRanger",
    "description": "BLUE",
    "connections": 
    [ {"id": 123,"megazordName": "Fer","isSet": true},
      {"id": 456,"megazordName": "Alg","isSet": false}
    ]
    },{
     "id": 2,
     "name": "PowerRanger",
     "description": "RED",
     "connections": 
    [ {"id": 789,"megazordName": "Tes","isSet": false},
      {"id": 369,"megazordName": "EXp","isSet": true}
    ]
    },{
    "id": 3,
    "name": "PowerRanger",
    "description": "WHITE",
    "connections": 
    [ {"id": 258,"megazordName": "Ref","isSet": false},
      {"id": 147,"megazordName": "Mob","isSet": false}
    ]
    }]


                    $scope.shouldBeDisabled = function (item) {
                        if (item.connections!= $scope.selectedPrizemoney) {                          
                            return true;
                        } else {                          
                            return false;
                        }
                    };
                });
    </script>
</head>
<body>
<div ng-app="atpModule" ng-controller="atpCtrl">

    <div id="atpPanel" class="panel">
        <h4 class="panel-header">ENABLE/DISABLE CHECKBOXES USING ANGULAR JS</h4>
        <hr/>
        <h5 class="panel-header">Select the connection:</h5>


        <select ng-model="selectedPrizemoney"  ng-options=" items.megazordName for items in atp[0].connections">
            <option value="" disabled="">Select one</option>

        </select>
        <hr/>
        <div ng-repeat="item in apt.connections">
            <p class="check-disabled-{{shouldBeDisabled(item)}}">
                <input type="checkbox" name="{{item.megazordName}}" 
                     value="{{item.megazordName}}" ng-disabled="shouldBeDisabled(item)">{{item.megazordName}}
            </p>
        </div>
    </div>
</div>
</body>
</html>

关于javascript - Json 对象 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29971856/

相关文章:

javascript - 使用基于应用程序状态/数据的 UI-Router

javascript - 浏览器渲染和 JavaScript 执行是否同时发生?

javascript - 包版本更改时如何通知?

javascript - 如何在 React 组件的返回函数中使用 IIFE?

javascript - 为什么我的函数值被调用了两次?

javascript - 嵌套指令之间的不同通信方式

javascript - 如何使用 jQuery Ajax 指定正确的输入以提交多个表单(可变数字)

json - 如何使用 JAXB 将长属性作为 JSON 字符串值返回

php - 如何在 Laravel 中将连接结果作为对象数组获取?

javascript - 为什么 Angular JS Controller 的作用域变量不将 this 设置为 true?