2016-12-20 7 views
0

2つのスコープ関数があり、グローバルスコープ変数を1つ宣言しました。 グローバル変数の変更を1つの関数で行いましたが、angularjの他の関数に反映されていません。関数内のグローバル変数に対する変更は、angularjsの別の関数では使用できません

シナリオは、テーブルにチェックボックスがあり、チェックボックスをオンにすると値が$scope.selection=[];にプッシュされる関数を作成したようなものです。

私は削除関数を呼び出す別の削除ボタンがあり、配列に格納された値で削除操作が実行されます。ただし、削除関数の中にconsole.log()をつけたときに、変更された配列の代わりに空の配列が得られます。親切に私にあなたの提案を教えてください。

コード:

$scope.selectionlist = []; 
$scope.selectitem = function(itemselected){ 
    if(itemselected.isChecked === true) {   
     $scope.selectionlist.push(itemselected.xyz); 
    } 
} 
$scope.deletememo = function(){ 
    console.log("selection inside deletememo",$scope.selectionlist.length);  
} 
+1

いくつかのコードを提供できますか?たぶんjsFiddle? – Stilltorik

+0

$ scope.selectionlist = []; $ scope.selectitem =関数(itemselected){ (真itemselected.isChecked ===)場合 {$ scope.selectionlist.push(itemselected.xyz)。 } } $ scope.deletememo = function(){ console.log( "chooseemememo"、$ scope.selectionlist.length); } –

+0

コードです。コードです。 –

答えて

0

は結果を表示するには、このcode.Runコードスニペットを試してみてください。

// Code goes here 
 

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

 
app.controller('mainCntrl',function($scope){ 
 
    
 
    $scope.selectionlist = []; 
 
    
 
    $scope.memo = [{'name': 'denny'}, 
 
       {'name': 'john'}, 
 
       {'name': 'joe'}, 
 
       {'name': 'snowden'} 
 
       ]; 
 

 
    $scope.selectedItem = function(data){ 
 
    if(data.checkbox){ 
 
     $scope.selectionlist.push(data); 
 
     console.log($scope.selectionlist); 
 
     } 
 
    else{ 
 
     var index = $scope.selectionlist.indexOf(data); 
 
     $scope.selectionlist.splice(index, 1); 
 
     console.log($scope.selectionlist); 
 
     } 
 
    }; 
 

 
    $scope.deleteMemo = function(){ 
 
    console.log($scope.selectionlist); 
 
    }; 
 
    
 
    });
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    
 
<div ng-app="myApp" ng-controller="mainCntrl"> 
 
    <table> 
 
    <tr ng-repeat="x in memo"> 
 
     <td>{{ x.name }}</td> 
 
     <td><input type="checkbox" ng-model="x.checkbox" ng- change="selectedItem(x)"></td> 
 
    </tr> 
 
    </table> 
 
<button ng-click="deleteMemo()">Delete</button> 
 
</div> 
 
    
 
    </body> 
 

 
</html>

+0

ありがとうございます。テーブルが部分的に見える場合はどうすればいいですか?私は部分的なビューのページ内に私の削除ボタンを、その作業を維持しようとしました。しかし、私はメインページの削除ボタンを保つ場合、私は同じエラーが発生しています。部分ビューの変更をメインビューに通知する方法。そのように私はメインページから削除機能を呼び出すと、チェックボックスが付いたテーブルが部分ページにあります。 –

1

@denny jonhは、あなたの質問に答えましたが、まだあなたが理解していない場合、あなたはあまりにも

JS

var app=angular.module("tableApp",[]); 
app.controller("tblCtrl",function($scope){ 
    $scope.selectedItem=[]; 
    $scope.tableValues=[{ 
    "id":1, 
    "name" : "dave", 
    "country":"india", 
    "designation":"software dev" 
    }, 
    { 
    "id":2, 
    "name" : "giri", 
    "country":"USA", 
    "designation":"QA" 
    }, 
    { 
    "id":3, 
    "name" : "dora", 
    "country":"UK", 
    "designation":"UI" 
    } 
    ] 
    $scope.change=function(data){ 
    if(data.isChecked){ 
     $scope.selectedItem.push(data); 
    } 
    else{ 
     $scope.selectedItem.splice($scope.selectedItem.indexOf(data),1) 
    } 
    } 
    $scope.displaySelectedRow=function(){ 
    if($scope.selectedItem==""){ 
     console.log("Select a row atleast") 
    } 
    else{ 
     console.log("The selected Row Value is: ",$scope.selectedItem); 
    } 
    } 
}) 

を私の答えを参照することができますが作業中Link

+0

ありがとうございます。テーブルが部分的に見える場合はどうすればいいですか?私は部分的なビューのページ内に私の削除ボタンを、その作業を維持しようとしました。しかし、私はメインページの削除ボタンを維持する場合、私は同じエラーが発生しています。部分ビューの変更をメインビューに通知する方法。そのように私はメインページから削除機能を呼び出すと、チェックボックスが付いたテーブルが部分ページにあります。 –

+0

私はあなたがそのようにしたい理由を知っているかもしれませんか? –

+0

まず、指定された条件でdbを検索して、部分的なビューでテーブルを表示しています。リストボタンはメインページにあります。私はそれの横に削除ボタンを配置しようとすると、私は期待どおりの出力を得ていない。 –

関連する問題