AngularJS自动完成所需的多个范围

时间:2016-12-07 12:04:36

标签: angularjs angularjs-scope angularjs-controller angularjs-filter

我有这样的数组结构。

[
  {
    "id": "1",
    "name": "John",
    "city": "NY"
  },
  {
    "id": "2",
    "name": "Gerold",
    "city": "LA"
  },
  {
    "id": "3",
    "name": "Stuart",
    "city": "Boston"
  }  
]

我的自动填充搜索需要 $ scope ,如下所示。

$scope.name=["john","Gerold","Stuart"];
$scope.city=["NY","LA","Boston"];

任何人都可以使用angularjs控制器来帮助解决这个问题。 在此先感谢。!

3 个答案:

答案 0 :(得分:1)

使用MAP

import java.awt.Color;
import java.awt.Component;
import java.awt.EventQueue;
import java.awt.GridLayout;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.lang.reflect.Constructor;

import javax.swing.DefaultCellEditor;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.JTextField;
import javax.swing.border.LineBorder;

@SuppressWarnings("serial")
public class JTableTest extends JFrame {
    private JTableTest() {
        super("JTable Test");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLayout(new GridLayout(1, 1));
        createPanel();
        pack();
        setVisible(true);
    }

    JPanel panel = new JPanel(new GridLayout(1, 1));
    JScrollPane scroll;

    private void createPanel() {
        Object[] headers = {"Length", "Title"};
        Object[][] sampleData = {{"673", "Bat Outta Hell"},
                {"358", "Spanish Train"},
                {"673", "Bat Outta Hell"}};
        JTable table = new JTable(sampleData, headers);
        table.setDefaultEditor(Object.class, new NumEditor());
        scroll = new JScrollPane(table);
        panel.add(scroll);
        getContentPane().add(panel);
    }

    private class NumEditor extends DefaultCellEditor {
        Class<?>[] argTypes = new Class<?>[]{String.class};
        Constructor<?> constructor;
        Object value;

        public NumEditor() {
            super(new JTextField());
            getComponent().setName("Table.editor");
        }

        public boolean stopCellEditing() {
            String s = (String)super.getCellEditorValue();
            try {
                if ("".equals(s)) {
                    if (constructor.getDeclaringClass() == String.class) {
                        value = s;
                    }
                    return super.stopCellEditing();
                }
                value = constructor.newInstance(new Object[]{s});
            }
            catch (Exception e) {
                ((JComponent)getComponent()).setBorder(new LineBorder(Color.red));
                return false;
            }
            return super.stopCellEditing();
        }

        public Component getTableCellEditorComponent(JTable table, Object value, boolean isSelected, int row, int column) {
            this.value = null;
            ((JComponent)getComponent()).setBorder(new LineBorder(Color.black));
            try {
                Class<?> type = table.getColumnClass(column);

                if (type == Object.class) {
                    type = String.class;
                }

                KeyListener kL = new KeyListener() {
                    public void keyPressed(KeyEvent e) {

                    }
                    public void keyReleased(KeyEvent e) {

                    }
                    public void keyTyped(KeyEvent e) {
                        char c = e.getKeyChar();
                        if(Character.isDigit(c)){

                        } else {
                            e.consume();
                        }
                    }
                };

                if(column == 0)
                    ((JComponent)getComponent()).addKeyListener(kL);
                else
                    ((JComponent)getComponent()).removeKeyListener(kL);

                constructor = type.getConstructor(argTypes);
            }
            catch (Exception e) {
                return null;
            }
            return super.getTableCellEditorComponent(table, value, isSelected, row, column);
        }

        public Object getCellEditorValue() {
            return value;
        }
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(() -> new JTableTest());
    }
}

答案 1 :(得分:1)

你也可以创建一个辅助函数来为你做这个,你不必为你想要的每个函数定义一个映射,而且你只需要一次运行就可以完成它(因此只需要更快一点)

此处示例;)

var myArray = [
    {
        "id": "1",
        "name": "John",
        "city": "NY"
    },
    {
        "id": "2",
        "name": "Gerold",
        "city": "LA"
    },
    {
        "id": "3",
        "name": "Stuart",
        "city": "Boston"
    }
]
function toScope(scopedPropertieNames, array) {
    scopedPropertieNames.forEach(function(propertyName) {
        if (! $scope[propertyName]) {
            $scope[propertyName] = []
        }
    });
    array.forEach(function (objecInArray) {
        scopedPropertieNames.forEach(function(propertyName) {
            $scope[propertyName].push(objecInArray[propertyName])
        })
    });
}

toScope(['name', 'city'], myArray);
console.log($scope) //{name: Array[3], city: Array[3]}

答案 2 :(得分:0)

您可以使用MAP ..

$scope.YourBigArray = [{
  "id": "1",
  "name": "John",
  "city": "NY"
}, {
  "id": "2",
  "name": "Gerold",
  "city": "LA"
}, {
  "id": "3",
  "name": "Stuart",
  "city": "Boston"
}];

$scope.names = $scope.YourBigArray.map(function(object) {
  return object.name;
});
$scope.cities = $scope.YourBigArray.map(function(object) {
  return object.city;
});

您可以使用过滤器来使用名称和城市数组中的唯一内容。

function filterForDuplicate(things) {
  return things.filter(function(item, pos) {
    return things.indexOf(item) === pos;
  });
}