2016-12-16 61 views
0

我想簡化我的控制器。所以我試圖設置變量來從外部控制器填充我的複選框列表。可能嗎?從外部控制器設置角度複選框重複

這裏是我當前的代碼http://jsfiddle.net/ilmansg/Lx37kr3e/1/

查看HTML

<div ng-controller="AdminEventsCtrl"> 
    <h1>Array 1</h1> 
    <ul> 
    <li ng-repeat="item in array1"> 
     <input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" /> 
     {{item.text}} 
    </li> 
    </ul> 

    <h1>Array 2</h1> 
    <script> 
    array2 = [{ 
    text: 'Option 1', 
    value: 'opt1' 
    }, { 
    text: 'Option 2', 
    value: 'opt2' 
    }, { 
    text: 'Option 3', 
    value: 'opt3' 
    }, { 
    text: 'Option 4', 
    value: 'opt4' 
    }]; 
    </script> 
    <ul> 
    <li ng-repeat="item in array2"> 
     <input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" /> 
     {{item.text}} 
    </li> 
    </ul> 

    <pre>Array1= {{array1}}</pre> 
    <pre>Array2= {{array2}}</pre> 
</div> 

SCRIPT JS

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

function AdminEventsCtrl($scope) { 
    $scope.formData = {}; 

    $scope.array1 = [{ 
    text: 'Option 1', 
    value: 'opt1' 
    }, { 
    text: 'Option 2', 
    value: 'opt2' 
    }, { 
    text: 'Option 3', 
    value: 'opt3' 
    }, { 
    text: 'Option 4', 
    value: 'opt4' 
    }]; 
} 

回答

1

不,這是不可能的,因爲角度會不知道該陣列連接到哪個範圍。這裏有一個簡化的解決方案來解決你的控制器凌亂的問題:

有兩個陣列,每個屬性textvalue

function AdminEventsCtrl($scope) { 
    $scope.formData = {}; 
    $scope.array1 = []; 

    var t = ['Option 1', 'Option 2', 'Option 3']; 
    var v = ['opt1', 'opt2', 'opt3']; 

    for(i=0;i<t.length;i++){ 
     $scope.array1.shift({text:t[i],value:v[i]}); 
    } 

} 

這可能是更多的代碼,但它看起來不那麼凌亂。它還允許您輕鬆添加新的值。

+0

嗯,如果只有一個變量實際上它wouldnt看起來太亂。但如果我有幾個複選框列表填充。它仍然看起來像一個混亂:( – ilmansg

0

我最終使工廠舉行我所有的數組,然後使用該工廠在我的控制器