如何在Angularjs中的作用域中更改值

Question

I'm trying to change the value of my scope in Angular.js when I'm changing to another view. 当我更改为另一个视图时，我试图在Angular.js中更改范围的值。 I have a list, and when you click on one of the elements a new view will appear with different values depending on the list element you clicked. 我有一个列表，当您单击其中一个元素时，根据您单击的列表元素，将出现一个具有不同值的新视图。 However, the scope values does not change. 但是，范围值不会更改。 I have tried a million different things, but I can't figure it out. 我已经尝试了一百万种不同的方法，但是我无法弄清楚。 Please help! 请帮忙！

The user should click on checkValues2 in the HTML view1, and then be forwarded to the HTML view2 where a list will appear with the values in the scope. 用户应该在HTML view1中单击checkValues2，然后将其转发到HTML view2，在该列表中将出现一个包含作用域中值的列表。

HTML view1 HTML视图1

<div ng-controller="IndexController">
   <div class="list">
     <div class="item item-divider">
      Hode og Hals
     </div>

     <a class="item" href="#" ng-click="checkValues2()">
      Ører
     </a>     
     <a class="item" href="#">
     Nese
     </a>     
    </div>

HTML2 HTML2

<html ng-app="legeApp">
<head>
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="IndexController">
  <ul class="list" >
    <li ng-repeat="test in test" class="item item-checkbox checkbox-assertive">
     <label class="checkbox">
       <input type="checkbox" ng-model="test.checked">
     </label >
      {{test.value}}
    </li>
  </ul>
</body>
</html>

JS JS

angular
  .module('legeApp')
  .controller('IndexController', function($scope, supersonic, $filter) {  

$scope.checkValues2 = function () {
          $scope.test = [
            {'value': 'value1',
             'checked': false},
            {'value': 'value2',
             'checked': false},
            {'value': 'value3',
             'checked': false}
            ];

        var view = new supersonic.ui.View("legeApp#helsePlager");

        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
        $scope.apply();

    };
});

Answer 1

This is maybe what you are looking for, click the button and you fill the array and angular automatically applies it: fiddle 也许这就是您要寻找的内容，单击按钮，然后填充数组，Angular自动将其应用：小提琴

<div ng-app="app">
    <div ng-controller="IndexController">
        <ul class="list">
            <li ng-repeat="item in test" class="item item-checkbox checkbox-assertive">
                <label class="checkbox">
                    <input type="checkbox" ng-model="item.checked" />
                </label>{{item.value}}</li>
        </ul>
        <button ng-click="addvalues()">add</button>
    </div>
</div>

JS JS

angular.module('app', [])
    .controller('IndexController', function ($scope) {
    $scope.test = [];
    $scope.addvalues = function () {
        $scope.test = [{
            'value': 'value1',
                'checked': true
        }, {
            'value': 'value2',
                'checked': false
        }, {
            'value': 'value3',
                'checked': false
        }];


    };

});

Answer 2

You could do that with ng-router. 您可以使用ng-router做到这一点。 If you pass the route parameter to the view then you can show a list depending on this parameter. 如果将route参数传递给视图，则可以根据此参数显示列表。

So you'll have one view that is displaying your list for the link you've clicked. 因此，您将有一个视图显示正在单击的链接的列表。

See this jsFiddle and the demo below. 请参阅下面的jsFiddle和演示。 (Sorry, the demo is not working here. Don't know why.) （抱歉，该演示在这里不起作用。不知道为什么。）

 var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider, $locationProvider) { $routeProvider.when('/view/:listId', { template: '<div>' + '<p ng-if="dataList.length==1">{{dataList[0]}}</p>' + '<ul ng-if="dataList.length>1">' + '<li ng-repeat="item in dataList">' + '<a href="/#/view/{{item}}">{{item}}</a></li></ul></div>', controller: 'ViewCtrl', }). otherwise({ redirectTo: '/view/main' }); // configure html5 to get links working on jsfiddle //$locationProvider.html5Mode(true); }); app.controller('ViewCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) { console.log($routeParams); var list = { // list for main 'main': ['test1', 'test2', 'test3'], // lists for view1 'test1': ['T1 1st', 'T1 2nd', 'T1 3rd'], 'test2': ['T2 1st', 'T2 2nd', 'T2 3rd'], 'test3': ['T3 1st', 'T3 2nd', 'T3 3rd'], // lists for view2 'T1 1st': ['T1 1st result'], 'T2 1st': ['T2 1st result'], 'T3 1st': ['T3 1st result'], 'T1 2nd': ['T1 2nd result'], 'T2 2nd': ['T2 2nd result'], 'T3 2nd': ['T3 2nd result'], 'T1 3rd': ['T1 3rd result'], 'T2 3rd': ['T2 3rd result'], 'T3 3rd': ['T3 3rd result'] }; $scope.dataList = list[$routeParams.listId]; }]);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.js"></script> <div> <a href="#/">home</a> <!--<a href="/#/view1">view1</a> <a href="/#/view2">view2</a>--> <div ng-view=""></div> </div>

如何在Angularjs中的作用域中更改值

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-01-24 23:31:20

解决方案2
0 2015-01-25 01:21:00

如何在Angularjs中的作用域中更改值

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-01-24 23:31:20

解决方案2 0 2015-01-25 01:21:00

解决方案1
0 已采纳 2015-01-24 23:31:20

解决方案2
0 2015-01-25 01:21:00