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

У меня есть коллекция JSON

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

У меня есть два HTML-выбора с одной и той же коллекцией JSON. Я выбрал человека Watson в первом выборе "Person", затем мне нужно обновить то же самое во втором HTML-выборе "Копировать человека" . Но я не могу обновить.

Я привязываю объект JSON как значение в выборе HTML вместо 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 для обновления функции Copy Person.

$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;
    }
});

введите здесь описание изображения

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


json angularjs html-select angular-ngmodel angularjs-ng-model
person Community    schedule 05.07.2016    source источник
comment
Вам нужно только одно и то же значение в обоих вариантах выбора.   -  person Vivek Singh    schedule 05.07.2016

Ответы (2)


arrow_upward
1
arrow_downward

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

<!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>

person David H.    schedule 05.07.2016
comment
Это $watchCollection действительно необходимо? - person developer033; 05.07.2016
comment
Нет, вы можете просто сделать $watch или, что еще лучше, вы можете просто сделать ng-change=update() для первого выбора. - person David H.; 05.07.2016
comment
Да, ng-change действительно лучше. Я делал ответ, используя его, но, поскольку ваш ответ уже принят, нет причин делать это. - person developer033; 05.07.2016

arrow_upward
1
arrow_downward

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

<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 дает больше преимуществ:

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

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

person Yoan    schedule 05.07.2016
comment
Ни один из select не должен использовать ng-repeat. - person developer033; 05.07.2016
comment
Но ng-options не поддерживается в md-select (Angular Material). Не могли бы вы предоставить мне решение для md-select. - person ; 05.07.2016