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

Question

當我更改為另一個視圖時，我試圖在Angular.js中更改范圍的值。 我有一個列表，當您單擊其中一個元素時，根據您單擊的列表元素，將出現一個具有不同值的新視圖。 但是，范圍值不會更改。 我已經嘗試了一百萬種不同的方法，但是我無法弄清楚。 請幫忙！

用戶應該在HTML view1中單擊checkValues2，然后將其轉發到HTML view2，在該列表中將出現一個包含作用域中值的列表。

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

<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

也許這就是您要尋找的內容，單擊按鈕，然后填充數組，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

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 個解決方案

解決方案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