Question

我的控制器中有一个变量，并希望稍后在点击按钮时指定一个值。即。

var app = angular.module('myApp', ['ngRoute']);    

....

var userArray = [
    {name: "John", age: 25}, {name: "Jim", age: 30}
];

app.controller('Page2Controller', function($scope) {
    $scope.message = 'Look! I am from page 2.';
    $scope.newArray = [];

    $scope.addUsers = function(){
        scope.newArray = userArray;

        console.log($scope.newArray);
    }  
}

app.config(function($routeProvider) {
    $routeProvider

    .when('/page2', {
       templateUrl : 'pages/page2.html',
       controller  : 'Page2Controller'

   ...

page2.html

<div>
     <p>{{ message }}</p>

     <ul>
         <li ng-repeat="user in Page2Controller.newArray">{{user.name}}</li>
     </ul>
</div>

的index.html

<body ng-controller="MainController">
    <div id="sideMenu">
        <h2>Campaign</h2>

        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#page2">Page 2</a></li>
            <li><a href="#page3">Page 3</a></li>
            <li><a href="#page4">Page 4</a></li>
        </ul>
    </div>

    <div ng-view></div>
</body>

我不明白为什么$ scope.user在控制台中显示但在html页面中“ng-repeat”不显示用户。可能是ng-repeat无法显示动态添加的数据吗？

有人能帮助我吗？感谢。

Answer 1

尝试切换到：

<li ng-repeat="user in scope.newArray">{{user.name}}</li>

我不认为'Page2Controller'在模板上下文中是已知的。

Answer 2

我猜你从未打过那个函数..

var app = angular.module('myApp', []);    
var userArray = [{name: "John", age: 25}, {name: "Jim", age: 30}];
app.controller('Page2Controller', function($scope) {
    $scope.message = 'Look! I am from page 2.';
    // $scope.newArray = [];
    $scope.addUsers = function(){
        $scope.newArray = userArray;
        console.log($scope.newArray);
    }  
    $scope.addUsers();
});

和html

<div ng-controller="Page2Controller">
                         <p>{{ message }}</p>

                         <ul>
                             <li ng-repeat="user in newArray">{{user.name}}</li>
                         </ul>
                    </div>

我已经静态使用了你的控制器，因为我没有实现ngRoute。

Answer 3

首先，您需要点击一下，然后点击

<button type="button" ng-click="asigningValue()"></button>

然后在您的控制器中，您必须分配您想要的内容，例如在控制器中之后，您需要在指令中绑定赋值，例如

app.controller('Page2Controller', function($scope) {
$scope.asigningValue=function(){
     $scope.message = 'Look! I am from page 2.';
  } 
}

然后使用数据绑定显示using指令

<p ng-bind-html="message"></p>

希望它会有所帮助！

谢谢！

我可以实例化变量但稍后为值赋值吗？

3 个答案: