2013-11-21 3 views
0

AngularJS ubern00b 여기에 indicies 추가/제거.AngularJS 모델의 지시선 추가/제거

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

myApp.controller('RentalAppCtrl', ['$scope', function($scope) { 

    $scope.master = {}; 

    $scope.update = function(rentalApp) { 
     console.log('updating scope'); 
     $scope.master = angular.copy(rentalApp); 
    } 

    $scope.reset = function() { 
     console.log('resetting scope'); 
     $scope.master = angular.copy($scope.master); 
    } 

    $scope.reset(); 

    $scope.rentalApp = { 
     name: '', 
     email: '', 
     phone: '', 
     history: { 
     "0": { 
      address: '', 
      city: '', 
      state: 'IN', 
      zip: '', 
     }, 
     "1": { 
      address: '', 
      city: '', 
      state: 'IN', 
      zip: '', 
     }, 
     "2": { 
      address: '', 
      city: '', 
      state: 'IN', 
      zip: '', 
     } 
     } 
    } 
}]); 

rentalApp이 API에 제출됩니다 history 개체 수를 지시 라디오 입력을 가지고 : 여기가 구축 된 각 모듈이다. 저는 Angular의 데이터 바인딩 기능을 좋아합니다. 라디오 버튼 입력 값을 사용하여 히스토리 개체의 크기를 결정하고 싶습니다.

PHP에서 나는 모델에서 필요한 history 개체를 추가하거나 제거하기 위해 array_push 또는 array_pop과 같은 것을 사용할 것입니다.

Angular이 작업을 수행하는 방법은 무엇입니까?

+0

가 왜이 같은 배열 –

+1

로'history' 개체를 디자인하지 않는 http://jsfiddle.net/arunpjohny/4Nk5K/1 /? –

+0

@ArunPJohny가 답변을 작성하고이를 수락합니다. 고맙습니다! –

답변

1

뭔가 다음

<div> 
    <input type="radio" value="1" ng-model="historyCount" /> 
    <input type="radio" value="2" ng-model="historyCount" /> 
    <input type="radio" value="3" ng-model="historyCount" /> 
    <input type="radio" value="4" ng-model="historyCount" /> 
</div> 
<div ng-repeat="history in rentalApp.history"> 
    <input ng-model="history.address" /> 
</div> 

같은

var app = angular.module('my-app', [], function() { 

}); 

app.controller('AppController', function ($scope) { 
    $scope.master = {}; 

    $scope.update = function (rentalApp) { 
     console.log('updating scope'); 
     $scope.master = angular.copy(rentalApp); 
    }; 

    $scope.reset = function() { 
     console.log('resetting scope'); 
     $scope.master = angular.copy($scope.master); 
    }; 

    $scope.reset(); 

    $scope.rentalApp = { 
     name: '', 
     email: '', 
     phone: '', 
     history: [{ 
      address: '', 
      city: '', 
      state: 'IN', 
      zip: '' 
     }, { 
      address: '', 
      city: '', 
      state: 'IN', 
      zip: '' 
     }, { 
      address: '', 
      city: '', 
      state: 'IN', 
      zip: '' 
     }] 
    }; 

    $scope.historyCount = $scope.rentalApp.history.length; 
    $scope.$watch('historyCount', function (value) { 
     if (value < $scope.rentalApp.history.length) { 
      $scope.rentalApp.history.splice(value); 
     } else if (value > $scope.rentalApp.history.length) { 
      while (value != $scope.rentalApp.history.length) { 
       $scope.rentalApp.history.push({ 
        address: '', 
        city: '', 
        state: 'IN', 
        zip: '' 
       }) 
      } 
     } 
    }) 
}); 

데모 : Fiddle

관련 문제