Angular js:无法遍历ng-init动态数据

时间:2014-05-19 06:31:45

标签: angularjs angularjs-ng-init

我是ANGULAR WORLD的新手,请帮忙 我有以下表格行

<tr data-ng-repeat="obj in myObjs | filter:search">
<td><strong data-ng-hide="obj.editMode">{{ obj.ObjID }}</strong></td>
<td>
    <p data-ng-hide="obj.editMode">{{ obj.Key }}</p>
    <p data-ng-show="obj.editMode">
        <input type="text" data-ng-model="obj.Name" />
    </p>
</td>
<td>
    <p data-ng-hide="obj.editMode">{{ obj.Value }}</p>
    <div ng-init="objKVP = {{obj.Value}}">
        <ul class="example-animate-container">
            <li class="animate-repeat" ng-repeat="val in objKVP">
                {{val.Key}} : {{val.Value}}
            </li>
        </ul>
    </div>                    
</td>               

在ng-init = objKVP,我会得到像

这样的值
[{'Key':'test','Value':'https://google.com'},
                     {'Key':'test1','Value':'testval1'},
                     {'Key':'test2','Value':'t@testval2'},
                     {'Key':'test3','Value':'testval3'},
                     {'Key':'test4','Value':'testval3'}]

但是当我尝试获取Key和Value时,它不会填充LI标签内部。 如果我直接在objKVP中发布上面的键值对,那么它会在LI标签内显示Key和value, 所以问题在于动态值,(虽然它在我检查元素时出现)

帮助

1 个答案:

答案 0 :(得分:1)

您可以尝试使用以下示例:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>



    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller('myController', [
            '$scope', function($scope) {

                $scope.init = function() {
                    $scope.a = 'Apples';
                    $scope.b = 'Bees';
                    $scope.c = 'Zebras';
                    $scope.objKVP = [
                        { 'Key': 'test', 'Value': 'https://google.com' },
                        { 'Key': 'test1', 'Value': 'testval1' },
                        { 'Key': 'test2', 'Value': 't@testval2' },
                        { 'Key': 'test3', 'Value': 'testval3' },
                        { 'Key': 'test4', 'Value': 'testval3' }
                    ];
                };
                // runs once per controller instantiation
                $scope.init();

            }
        ]);
    </script>

<body ng-controller="myController">
    <h2>JavaScript Projects</h2>
    <br>
    <h2 ng-bind="a+ ' ' + b +' ' +c "></h2>
    <table>
        <tr ng-repeat="obj in objKVP | filter:search">
            <td><strong ng-hide="obj.editMode">{{ obj.ObjID }}</strong></td>
            <td width="100px;">
                <p ng-hide="obj.editMode">{{ obj.Key }}</p>
            </td>
            <td width="200px;">
                <p ng-hide="obj.editMode">{{ obj.Value }}</p>
                <p ng-show="obj.editMode">
                    <input type="text" ng-model="obj.Name" />
                </p>
            </td>
        </tr>
    </table>
</body>