Question

我的JSON中有两个字段：first_name和last_name。

我想使用Bootstrap typeahead.js，使用Angular-UI。

<script type="text/ng-template" id="customTemplate.html">
  <a>
    <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>
  <input type="text" ng-model="result" typeahead="patient as patient.first_name for patient in ngGridUsersData.patients | filter:{first_name:$viewValue}" typeahead-template-url="customTemplate.html">

我还会在typeahead字段中添加什么来搜索last_name？我会在模板中添加什么来在选择时显示名字和姓氏？

如果angular-ui指令没有这个功能，那么我想我只会将名字和姓氏连接成一个字符串。

更新： 9/15/14 知道如何在搜索结果中显示名字和姓氏吗？

Answer 1

您可以尝试使用自定义函数进行预先输入，而不是使用过滤器：

<input type="text" 
       ng-model="result" 
       typeahead="patient as patient.first_name for patient in filterByName(ngGridUsersData.patients, $viewValue)" 
       typeahead-template-url="customTemplate.html">

// ...snip...

function filterByName(patients, typedValue) {
    return patients.filter(function(patient) {
        matches_first_name = patient.first_name.indexOf(typedValue) != -1;
        matches_last_name = patient.last_name.indexOf(typedValue) != -1;

        return matches_first_name || matches_last_name;
    });
}
$scope.filterByName = filterByName;

警告：我没有测试过这段代码/从我的项目中抽出它，所以可能会有一两个错误需要进行一些调整才能解决。

Answer 2

要在搜索结果中显示名字和姓氏，请将michael0x2a的输入标记修改为：

 <input type="text" 
       ng-model="result" 
       typeahead="patient as patient.first_name + ' ' + patient.last_name for patient in filterByName(ngGridUsersData.patients, $viewValue)" 
       typeahead-template-url="customTemplate.html">

Answer 3

AngularJS UI Bootstrap - Typeahead - 按多个属性过滤：

“uib-typeahead”属性是您放置要过滤的字段的位置。

// pcap variables
pcap_t *handle;
struct pcap_pkthdr *header;
const u_char *pkt_data;
// timevals used to calculate delay from last filtered packet
struct timeval oldTimevalUpload;
struct timeval oldTimevalDownload;      
memset(&oldTimevalUpload, 0, sizeof(oldTimevalUpload));
memset(&oldTimevalDownload, 0, sizeof(oldTimevalDownload));

// stopLogging is a boolean flag declared in connection "parent" thread: 
// it is set to false when connection thread has done sending and
// receiving data and connection is going to be closed
while (((res = pcap_next_ex(handle, &header, &pkt_data)) >= 0) && (!stopLogging)) {
    // check res
    if (packet is upload) {
        struct timeval difference;
        timeval_subtract(&difference, &(header->ts), &oldTimevalUpload);
        long long delay = (difference.tv_sec * 1000000) + difference.tv_usec;
        long long acceptedPackets = ((long long)(pkt_data)) * 1000000;
        long long acceptedBits = ((long long)(pkt_data+8)) * 8 * 1000000;
        long long pps = acceptedPackets / delay;
        long long bps = acceptedBits / delay;
        debugRed(host << ", UPLOAD DIVIDE ACCEPTED PKTS " << acceptedPackets << 
            " AND ACCEPTED BITS " << acceptedBits << " PER DELAY " << delay << 
            " IS PPS " << pps << " AND BPS " << bps);
        oldTimevalUpload.tv_sec = header->ts.tv_sec;
        oldTimevalUpload.tv_usec = header->ts.tv_usec;
    } else if (packet is download) {
        // basically the same as above
    }
}
debug("Quit logging connection " << localIPaddr << ":" << localPort << " and "
    << remoteIPaddr << ":" << remotePort);
pcap_close(handle);

使用AngularJS中的Bootstrap Typeahead在两个字段中搜索

3 个答案: