Angular JS如何通过JSON变量实现动态筛选？

我来帮你搞定这个动态筛选的需求！其实核心就是把原来写死的'Bob'换成可变的变量，再通过按钮点击事件来动态更新这个变量，重新筛选数据就行。下面是具体的实现步骤和代码示例，完全适配你的场景：

步骤1：在HTML里添加筛选按钮 #

首先在index.html里给每个需要筛选的人员做对应的按钮，用data-name属性把人员名字存进去，这样点击时就能直接拿到要筛选的目标：

<!-- 筛选按钮区域 -->
<button class="filter-btn" data-name="Bob">查看Bob的电话</button>
<button class="filter-btn" data-name="Alice">查看Alice的电话</button>
<button class="filter-btn" data-name="Charlie">查看Charlie的电话</button>

<!-- 用来显示电话号码的区域 -->
<div id="phone-display"></div>

步骤2：编写动态筛选的JavaScript逻辑 #

接下来写JS代码，先获取test.json里的联系人数据，然后封装筛选函数，给按钮绑定点击事件：

// 全局存储联系人数据，方便后续筛选使用
let contacts = [];

// 第一步：先加载test.json里的数据
fetch('test.json')
    .then(response => response.json())
    .then(data => {
        contacts = data;
        // 可选：页面加载完成后默认显示Bob的信息，和你原来的逻辑对齐
        filterContacts('Bob');
    })
    .catch(err => console.error('加载联系人数据失败:', err));

// 第二步：封装动态筛选函数，传入要筛选的名字作为参数
function filterContacts(targetName) {
    // 从联系人数组里找到匹配的人员
    const matchedPerson = contacts.find(item => item.Name === targetName);
    
    // 把结果渲染到页面上
    const displayArea = document.getElementById('phone-display');
    if (matchedPerson) {
        displayArea.innerHTML = `<p>${targetName}的电话号码：<strong>${matchedPerson.Phone}</strong></p>`;
    } else {
        displayArea.innerHTML = `<p>未找到${targetName}的相关信息</p>`;
    }
}

// 第三步：给所有筛选按钮绑定点击事件
document.querySelectorAll('.filter-btn').forEach(button => {
    button.addEventListener('click', function() {
        // 从按钮的data-name属性里拿到要筛选的名字
        const targetName = this.dataset.name;
        // 调用筛选函数更新显示内容
        filterContacts(targetName);
    });
});

核心思路解释 #

• 把原来固定的filter: {Name: 'Bob'}改成了参数化的筛选逻辑，通过targetName变量来动态替换具体的人员名字
• 用按钮的data-name属性存储筛选目标，避免写多个重复的点击事件函数，扩展性更强——以后要加新的人员，只需要多写一个按钮就行
• 先异步加载test.json的数据并缓存，每次点击按钮时直接从缓存里筛选，不用重复请求数据

内容的提问来源于stack exchange，提问作者shadadow