角度foreach列表元素

时间:2016-03-17 17:19:33

标签: javascript angularjs ionic-framework

我设置的HTTP请求比满足所有承诺后将返回范围。在这种情况下,它是一个产品清单。

我的目标是将这些产品初始设置为不透明度为0,然后使用foreach添加一个类,使其不透明度为1.

我目前使用的是ul元素,但我无法使用子元素。

目前这是我的承诺:

angular.forEach(angular.element(document.querySelector('.product-list')), function(value, key){
    var a = angular.element(value);
    a.addClass("loaded");
});

但没有任何数量的.product-list li等可以使用。

有什么想法吗?

HTML的示例是:

<ul class="product-list">
    <li>item 1</li>
    <li>Item 2</li>
    <li>item 1</li>
    <li>Item 2</li>
</ul>

和CSS:

.product-list {
    li {
        opacity: 0;
        &.loaded {
            opacity: 1;
        }
    }
}

我会在foreach中暂停。

1 个答案:

答案 0 :(得分:0)

我认为你的CSS(SASS?LESS?)应该是:

public class WiFiChatFragment extends Fragment {
    private View view;
    private ChatManager chatManager;
    private TextView chatLine;
    private ListView listView;
    ChatMessageAdapter adapter = null;
    private List<String> items = new ArrayList<String>();
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_chat, container, false);
        chatLine = (TextView) view.findViewById(R.id.txtChatLine);
        listView = (ListView) view.findViewById(android.R.id.list);
        adapter = new ChatMessageAdapter(getActivity(), android.R.id.text1,
                items);
        listView.setAdapter(adapter);

        view.findViewById(R.id.button1).setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View arg0) {
                        if (chatManager != null) {
                            chatManager.write(chatLine.getText().toString()
                                    .getBytes());
                            pushMessage("Me: " + chatLine.getText().toString());
                            chatLine.setText("");
                            chatLine.clearFocus();

                        }
                    }
                });
        return view;



    }
    public interface MessageTarget {
        public Handler getHandler();
    }
    public void setChatManager(ChatManager obj) {
        chatManager = obj;
    }
    public void pushMessage(String readMessage) {
        adapter.add(readMessage);
        adapter.notifyDataSetChanged();
    }
    /**
     * ArrayAdapter to manage chat messages.
     */
    public class ChatMessageAdapter extends ArrayAdapter<String> {
        List<String> messages = null;
        public ChatMessageAdapter(Context context, int textViewResourceId,
                                  List<String> items) {
            super(context, textViewResourceId, items);

        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            if (v == null) {
                LayoutInflater vi = (LayoutInflater) getActivity()
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                v = vi.inflate(android.R.layout.simple_list_item_1, null);
            }
            String message = items.get(position);

            if (message != null && !message.isEmpty()) {
                TextView nameText = (TextView) v
                        .findViewById(android.R.id.text1);
                if (nameText != null) {
                    nameText.setText(message);
                    if (message.startsWith("Me: ")) {
                        nameText.setBackgroundResource(R.drawable.bubble_b );
                        nameText.setTextAppearance(getActivity(),
                                R.style.normalText);
                    } else {
                        nameText.setBackgroundResource(R.drawable.bubble_a );
                        nameText.setTextAppearance(getActivity(),
                                R.style.boldText);
                    }
                }
            }
            return v;
        }
    }
}

因为您将.product-list { li { opacity: 0; } &.loaded { li { opacity: 1; } } } 类添加到loaded元素。