Question

当我改变到另一个视图时，我试图在Angular.js中更改范围的值。我有一个列表，当您单击其中一个元素时，新视图将显示不同的值，具体取决于您单击的列表元素。但是，范围值不会更改。我尝试了一百万种不同的东西，但我无法弄明白。请帮忙！

用户应单击HTML view1中的checkValues2，然后转发到HTML view2，其中将显示包含范围中值的列表。

HTML view1

<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

<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

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

这可能就是您要找的，点击按钮然后填充数组并且角度会自动应用它：fiddle

<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

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

你可以用ng-router做到这一点。如果将route参数传递给视图，则可以根据此参数显示列表。

因此，您将有一个视图显示您点击的链接列表。

请参阅此jsFiddle和以下演示。（对不起，这个演示在这里不起作用。不知道为什么。）

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 个答案: