Копировать JSON объект одного Выберите в другой Выбор нг-модели с использованием AngularJS

Я с JSON КоллекцияКопировать JSON объект одного Выберите в другой Выбор нг-модели с использованием AngularJS

$scope.person = [ 
    { 
     "Id": 1 
     "Name": "John" 
    }, 
    { 
     "Id": 2 
     "Name": "Jack" 
    }, 
    { 
     "Id": 3 
     "Name": "Watson" 
    }, 
];

У меня два HTML Выберите с таким же JSON коллекции. Я выбрал человека Watson в первом Выберите «Лицо», затем мне нужно обновить его во втором HTML. Выберите «Скопировать человека». Но я не могу обновить.

Я связываю JSON объект как ценность в HTML Select вместо Id или Name

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>HTML Select using AngularJS</title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div class="md-block"> 
 
     <label>Person</label> 
 
     <select ng-model="selected.person"> 
 
      <option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option> 
 
     </select> 
 
    </div> 
 
    <hr /> 
 
    <div class="md-block"> 
 
     <label>Copy Person</label> 
 
     <select ng-model="selected.copy_person"> 
 
      <option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option> 
 
     </select> 
 
    </div> 
 

 
</div> 
 

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

 
    app.controller('myCtrl', function ($scope) { 
 

 
     $scope.person = [ 
 
      { 
 
       "Id": 1, 
 
       "Name": "John" 
 
      }, 
 
      { 
 
       "Id": 2, 
 
       "Name": "Jack" 
 
      }, 
 
      { 
 
       "Id": 3, 
 
       "Name": "Watson" 
 
      } 
 
     ]; 
 

 
     $scope.selected = { 
 
      person: null, 
 
      copy_person:null 
 
     }; 
 

 
     $scope.$watchCollection('selected.person', function (newData, oldDaata) { 
 
      var obj = JSON.parse(newData); 
 
      if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) { 
 
       var name = obj.Name; 
 
       alert(name); 
 
       $scope.selected.copy_person = obj; 
 
      } 
 
     }); 
 

 
    }); 
 
</script> 
 
</body> 
 
</html>

Здесь я использовал $scope.$watchCollection обновить копию Лицо

$scope.$watchCollection('selected.person', function (newData, oldDaata) { 
    var obj = JSON.parse(newData); 
    if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) { 
     var name = obj.Name; 
     alert(name); 
     $scope.selected.copy_person = obj; 
    } 
});

Мой код не удается обновить во второй Select. Пожалуйста, помогите мне, как обновить ...

источник

2016-07-05 Anonymous

Вы хотите только одно значение в обоих вариантах. –

Это код, который вы должны использовать, нг-опции производится для этого:

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>HTML Select using AngularJS</title> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 
    
 
     <div ng-app="myApp" ng-controller="myCtrl"> 
 
    
 
      <div class="md-block"> 
 
       <label>Person</label> 
 
       <select ng-model="selected.person" ng-options="p as p.Name for p in person"> 
 
       </select> 
 
      </div> 
 
      <hr /> 
 
      <div class="md-block"> 
 
       <label>Copy Person</label> 
 
       <select ng-model="selected.copy_person" ng-options="p as p.Name for p in person"> 
 
       </select> 
 
      </div> 
 
    
 
     </div> 
 
    
 
     <script> 
 
     var app = angular.module('myApp', []); 
 
    
 
     app.controller('myCtrl', function ($scope) { 
 
    
 
      $scope.person = [ 
 
       { 
 
        "Id": 1, 
 
        "Name": "John" 
 
       }, 
 
       { 
 
        "Id": 2, 
 
        "Name": "Jack" 
 
       }, 
 
       { 
 
        "Id": 3, 
 
        "Name": "Watson" 
 
       } 
 
      ]; 
 
    
 
      $scope.selected = { 
 
       person: null, 
 
       copy_person:null 
 
      }; 
 
    
 
      $scope.$watchCollection('selected.person', function (newData, oldDaata) { 
 
       var obj = newData; 
 
       if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) { 
 
        var name = obj.Name; 
 
        alert(name); 
 
        $scope.selected.copy_person = obj; 
 
       } 
 
      }); 
 
    
 
     }); 
 
     </script> 
 
    </body> 
 
    </html>

источник

2016-07-05 18:34:06

Действительно ли это '$ watchCollection' действительно необходимо? – developer033

Нет, вы можете просто сделать $ watch, или еще лучше, но вы можете просто сделать ng-change = update() для первого выбора. –

Да, 'ng-change' действительно лучше. Я использовал ответ, но, поскольку ваш ответ уже принят, нет оснований для этого. – developer033

Dont использование нг-повтора для создать второй выбор, сделать что-то вроде этого:

<div class="md-block"> 
     <label>Person</label> 
     <select ng-model="selected.person"> 
      <option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option> 
     </select> 
    </div> 
    <hr /> 
    <div class="md-block"> 
     <label>Copy Person</label> 
     <select ng-model="selected.copy_person" ng-options="obj.Name for obj in person track by obj.Name"> 
     </select> 
    </div>

именно поэтому вы не должны использовать ngRepeat с для визуализации выбора опций. Во многих случаях ngRepeat можно использовать для элементов вместо ngOptions для достижения аналогичного результата. Тем не менее, ngOptions предоставляет больше преимуществ:

большую гибкость в том, как «модель с присваивается с помощью избранных как часть выражения понимания
снижается потребление памяти, не создавая новую область для каждого повторного экземпляра
Увеличенная скорость рендеринга, создавая параметры в документе, а не отдельно. Вместо этого вы должны использовать ngOptions.

Если вы не хотите использовать лучший способ, ng-options, вы можете добавить ng-selected атрибут с логикой проверки состояния для директивы option, чтобы выполнить предварительную выборку!

источник

2016-07-05 18:36:12 Yoan

Ни один из 'select' не должен использовать' ng-repeat'. – developer033

Но ng-options не поддерживается в md-select (Угловой материал).Можете ли вы предоставить мне решение для md-select. –

Копировать JSON объект одного Выберите в другой Выбор нг-модели с использованием AngularJS

ответ

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