Question

我有一个JSON Collection

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

我有两个带有相同JSON Collection的HTML Select。我在First Select＆＃34; Person ＆＃34;中选择了一个人 Watson ，然后我需要在第二个HTML Select中更新相同的＆＃34; < strong>复制人＆＃34;。但我无法更新。

我在HTML Select中绑定 JSON对象作为值，而不是 Id 或 Name < / p>

＆＃13;

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

＆＃13;

我在这里使用 $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;
    }
});

我的代码无法在第二次选择中更新。请帮助我更新......

Answer 1

这是你必须使用的代码，为此做了ng-options：

＆＃13;

Settings.Builder settings =  Settings.settingsBuilder();
        settings.put("cluster.name", "elasticsearchcluster");
         List<String> hosts = new LinkedList<String>();
         ArrayList<ElasticSearchHost> esHosts = elasticSearchConfig.esHostsConfig.esHosts;
         for (ElasticSearchHost host : esHosts) {
            hosts.add(host.host + ":" + host.port);
         }
        settings.put("discovery.zen.ping.multicast.enabled", "false");
        settings.put("discovery.zen.ping.unicast.hosts", StringUtils.join(hosts, ","));
        //settings.put("discovery.zen.ping.unicast.hosts","xxx.yy.zz.aaa:9300, xxx.yy.zz.bbb:9300, xxx.yy.zz.ccc:9300");
        client =   TransportClient.builder().settings(settings).build();
        for (ElasticSearchHost host : esHosts) {
            ((TransportClient) client).addTransportAddress(new InetSocketTransportAddress(new InetSocketAddress(host.host, host.port)));

        }
        ClusterHealthResponse clusterHealth = client.admin().cluster().health(clusterHealthRequest().waitForGreenStatus()).actionGet();

＆＃13;

Answer 2

不要使用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属性和选项指令的条件检查逻辑，以便进行预选择工作！

将一个选择的JSON对象复制到另一个使用AngularJS选择ng模型

2 个答案: