2014-02-13 2 views
1

Мы опробовали angular.copy и angular.extend. Оба они, однако, копируют значения свойств. Как скопировать свойства одного объекта без их значений другому объекту?Использование Угловое копирование свойств объекта - без значений - на другой объект

Вот fiddle с нашими запросами на основе how-to-quickly-clear-a-javascript-object.

angular.module('App', []); 

function Ctrl($scope) { 

    function copyNotValues(obj) { 
     var newObj = angular.copy(obj); 
     for (prop in newObj) { 
      if(newObj.hasOwnProperty(prop)) 
      { 
       newObj[prop] = null; 
      } 
     }; 
     return newObj; 
    } 

    $scope.master = { 
     foo: 'original foo', 
     bar: 'original bar' 
    }; 

    $scope.copy = angular.copy($scope.master); 
    $scope.extend = angular.extend($scope.master); 
    $scope.copyNotValues = copyNotValues($scope.master); 

} 

ответ

1

У JavaScript нет понятия классов. Он использует наследование Prototype, что означает, что вы можете создавать только новый объект, копируя другой объект. При этом вы получаете свойства.

Вы можете обойти это, создав «главный» объект без значений свойств. Что-то вроде этого:

master = { 
    foo: '', 
    bar: '' 
}; 

Тогда вы можете создать новые «экземпляры» объекта с новым ключевым словом:

$scope.master = new master(); 
$scope.master.foo = 'original foo'; 
$scope.master.bar = 'original bar'; 

Если вам необходимо создать новый экземпляр объекта, вернитесь к оригинал, не ваша копия:

$scope.masterCopy = new master(); 

Это действительно проблема с JavaScript, а не проблема с угловым выражением. Я полагаю, вы могли бы теоретически написать функцию для создания нового экземпляра объекта, а затем перебрать свойства, чтобы установить их все в нулевые или пустые строки.

+1

Спасибо за это! Мой подход будет состоять в том, чтобы использовать angular.copy(), перебрать новый объект и установить для каждого из его свойств значение null. Создание «главного» объекта может быть хорошим для другой ситуации, потому что мой объект интереса исходит из вызова REST и имеет много свойств, поэтому создание мастера будет заключаться в многократном дублировании кода. –

+1

@ShaunLuttin В моем опыте ActionScript; было много смысла дублировать объекты на стороне сервера и на клиенте. Но поскольку JavaScript является свободно типизированным языком, вы, вероятно, правы, что накладные расходы не имеют смысла. Я уверен, что a для каждого цикла предоставит вам все свойства объекта; и вы должны иметь возможность инкапсулировать это в функцию полезности для простого повторного использования. Удачи! – JeffryHouser

+1

Отличные советы! Мы уже дублируем объекты на стороне сервера и клиента. На сервере у нас есть как привязывающая модель, так и модель представления. А на клиенте у нас есть ng-модель, которая существует в HTML-шаблоне. Если бы мы также дублировали модель в ng-контроллере, тогда у нас было бы четыре представления одной и той же модели! Как вы говорите, три из них достаточно накладные. JavaScript for loop сделал трюк в функции утилиты, которую мы ввели в услугу «Угловая». Спасибо за поддержку! –

0

Мое решение выглядит следующим образом: Вы можете использовать угловую.объект и передать объект. Перед этим определите объект с пустым фигурными фигурными скобками. Код выглядит следующим образом. Я использовал другой пример, но подход подчеркивания тот же ,

angular.module('formExample', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 

 
    $scope.sa = {}; //declaring sa object 
 
    $scope.ba = {}; //declaring ba object 
 
    $scope.update = function() { 
 
     $scope.ba = angular.copy($scope.sa); 
 
    }; 
 

 
    }]);
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-example32-production</title> 
 

 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script> 
 

 

 

 
</head> 
 

 
<body ng-app="formExample"> 
 
    <div ng-controller="ExampleController"> 
 
    <form novalidate class="simple-form"> 
 
     <h3>Shipping Address</h3> 
 
     Name:<input type="text" ng-model="sa.name" ng-change="sameAddress && update()" placeholder="in" /><br/> Age: 
 
     <input type="text" ng-model="sa.age" ng-change="sameAddress && update()" placeholder="age" /> 
 
     <br /> Street: 
 

 
     <br /> 
 

 
     <h3>Billing Address 
 
     <input type="checkbox" ng-model="sameAddress" ng-change="sameAddress && update()" />Copy 
 
     </h3> 
 

 
     Name:<input type="text" ng-model="ba.name" ng-disabled="sameAddress" placeholder="out" /><br/> Age: 
 
     <input type="text" ng-model="ba.age" ng-disabled="sameAddress" placeholder="age" /> 
 
     <br /> 
 

 
     <br /> 
 

 
    </form> 
 

 
    </div> 
 

 

 
</body> 
 

 
</html>

pluner является here

Смежные вопросы