我可以实例化一个变量但稍后将值分配给值吗？

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

首先你需要一个 ng-click 指令，你必须点击它，例如

<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>

希望对您有所帮助！

谢谢！

我可以实例化一个变量但稍后将值分配给值吗？

Can I instantiate a variable but assign a value to value later?

javascript

angularjs

ng-repeat

angularjs-ng-repeat